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What will you learn from this book? 

So you’re ready to make the leap from writing IITML and CSS web 
pages to scripting dynamic web applications? Start here. Head First 
favaScripl is your guided tour to exciting and interactive web page 
creation. Built lor ynur brain, this bonk covers all the JavaScript 
essentials, from basic web programming techniques including 
variables，I unctions, and looping to more advanced topics like form 
validation, DOM manipulation, custom objects, debugging — and 
even Ajax! So get ready. „ responsive web sites arc just pages away. 
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Why does this book look so different? 

We think your time is too valuable to spend siriigglinir with new 
concepts. Using the latest research in cognitive science and learning 
theory to craft a multi-sensory learning experience. Head First 
JavaScripi uses a visually rich format designed for the way your brain 
works, not a text-lieaw approach that puts von to sleep. 


“So practical and 
useful, and so well 
explained. This book 
does a great job of 
introducing a com¬ 
plete newbie to 
JavaScript，and it’s 
another testament to 
Head First’s teaching 
style. Out of the other 
JavaScript books, 
Head First JavaScript 
is great for learning, 
compared to ottier 
reference books the 
size of a phone book, ” 

— Alex !.ee, Studenl, 
University of Houston 

“An excellent choice 
for the "beginning 
JavaScript developer.” 

― Fletcher Moore, 
M 祕 Developer Cff Designer, 
Georgia Institute 
of Technology 

“Yet another great 
book in the classic 
"Head First 1 style. H 

—TW Scannell 
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Advance Praise for Head First JavaScript 

“So practical and useful, and so well explained. This book does a great job of introducing a complete 
newbie to JavaScript, and it’s another testament to Head First’s teaching style. Out of the other 
JavaScript books, Head First JavaScript is great for learning, compared to other reference books the size of 
a phone book.” 

— Alex Lee ， Student，University of Houston 

“An excellent choice for the beginningJavaScript developer.’’ 

— Fletcher Moore，Web Developer & Designer, Georgia Institute of Technology 


“Yet another great book in the classic 'Head First’ style.” 

— TW Scannell 


“JavaScript has long been the client-side engine that drives pages on the Web, but it has also long been 
misunderstood and misused. With Head First JavaScript, Michael Morrison gives a straightforward and 
easy-to-understand introduction of this language, removing any misunderstanding that ever existed and 
showing how to most effectively use it to enhance your web pages.” 


— Anthony T. Holdener III, Web applications developer，and the author of Ajax: 
The Definitive Guide. 


“A web page has three parts — content (HTML), appearance (CSS), and behaviour JavaScript). Head First 
HTML introduced the first two, and this book uses the same fun but practical approach to introduce 
JavaScript. The fun way in which this book introduces JavaScript and the many ways in which it 
reinforces the information so that you will not forget it makes this a perfect book for beginners to use to 
start them on the road to making their web pages interactive.” 

— Stephen Chapman，Owner Felgall Pty Ltd. 5 JavaScript editor, about.com 


“This is the book I’ve been looking for to recommend to my readers. It is simple enough for complete 
beginners but includes enough depth to be useful to more advanced users. And it makes the process of 
learning fun. This might just be the only JavaScript book you ever need.” 

— Julie L Baumler, JavaScript Editor, BellaOnline. com 
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“Eric and Elisabeth Freeman clearly know their stuff. As the Internet becomes more complex, inspired 
construction of web pages becomes increasingly critical. Elegant design is at the core of every chapter here, 
each concept conveyed with equal doses of pragmatism and wit.” 

— Ken Goldstein, Executive Vice President & Managing Director, Disney Online 


“The Web would be a much better place if every HTML author started off by reading this book.” 

— L. David Baron, Technical Lead, Layout & CSS, Mozilla Corporation, 
http://dbaron. org/ 

“I’ve been writing HTML and CSS for ten years now, and what used to be a long trial and error learning 
process has now been reduced neatly into an engaging paperback. HTML used to be something you 
could just hack away at until things looked okay on screen, but with the advent of web standards and 
the movement towards accessibility, sloppy coding practice is not acceptable anymore... from a business 
standpoint or a social responsibility standpoint. Head First HTML with CSS & XHTML teaches you how 
to do things right from the beginning without making the whole process seem overwhelming. HTML, 
when properly explained, is no more complicated than plain English, and the Freemans do an excellent 
job of keeping every concept at eye-level.” 

— Mike Davidson, President & CEO, News vine, Inc. 


“Oh, great. You made an XHTML book simple enough a CEO can understand it. What will you 
do next? Accounting simple enough my developer can understand it? Next thing you know we’ll be 
collaborating as a team or something.” 

— Janice Fraser, CEO, Adaptive Path 

“This book has humor, and charm, but most importantly, it has heart. I know that sounds ridiculous 
to say about a technical book, but I really sense that at its core, this book (or at least its authors) really 
care that the reader learn the material. This comes across in the style, the language, and the techniques. 
Learning — real understanding and comprehension — on the part of the reader is clearly top most in 
the minds of the Freemans. And thank you, thank you, thank you, for the book’s strong, and sensible 
advocacy of standards compliance. It’s great to see an entry level book, that I think will be widely read 
and studied, campaign so eloquently and persuasively on behalf of the value of standards compliance in 
web page code. I even found in here a few great arguments I had not thought of - ones I can remember 
and use when I am asked — as I still am — ‘what’s the deal with compliance and why should we care?’ 

I’ll have more ammo now! I also liked that the book sprinkles in some basics about the mechanics of 
actually getting a web page live - FTP, web server basics, file structures, etc.” 

— Robert Neer, Director of Product Development, Movies.com 



Praise for Head First HTML with CSS & XHTML 


““Freeman’s Head First HTML with CSS & XHTML is a most entertaining book for learning how to build 
a great web page. It not only covers everything you need to know about HTML, CSS, and XHTML, 
it also excels in explaining everything in layman’s terms with a lot of great examples. I found the book 
truly enjoyable to read, and I learned something new!” 

— Newton Lee, Editor-in-Chief, ACM Computers in Entertainment, 
http:/ / www, acmcie. org 


“My wife stole the book. She’s never done any web design, so she needed a book like Head First HTML 
with CSS & XHTML to take her from beginning to end. She now has a list of web sites she wants to build 
— for our son’s class, our family, ... If I’m lucky, I’ll get the book back when she’s done.” 

— David Kaminsky, Master Inventor, IBM 


“Beware. If you’re someone who reads at night before falling asleep, you’ll have to restrict Head First 
HTML with CSS & XHTML to daytime reading. This book wakes up your brain.” 

— Pauline McNamara, Center for New Technologies and Education, 
Fribourg University, Switzerland 


“The information covered in this book is the same material the pros know, but taught in an educational 
and humorous manner that doesn’t ever make you think the material is impossible to learn or you are 
out of your element.” 

— Christopher Schmitt, Author of The CSS Cookbook and Professional CSS, 
schmitt@christopher. org 


“Head First HTML with CSS & XHTML is a thoroughly modern introduction to forward-looking practices 
in Web page markup and presentation. It correctly anticipates readers’ puzzlements and handles them 
just in time. The highly graphic and incremental approach precisely mimics the best way to learn this 
stuff: make a small change and see it in the browser to understand what each new item means.” 

一 Danny Goodman, author of Dynamic HTML: The Definitive Guide 
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To the folks at Netscape who, way back in the last century, dreamed 
that the Web could be much more than a big online book with a 
bunch of linked pages that don’t do anything. 

Of course, they also dreamed up that horrific <blink> tag...dare 
to dream, just don’t get too carried away! 



the author 


Author of Head First JavaScript 



Michael Morrison has 

computers since his first PC, a TI-99 / 4A, complete with its 
supremely ergonomic keyboard, state of the art black and 
white TV “monitor,” and sweet cassette tape storage system. 
He has owned and tinkered with a few more computers 
since then, but still longs for the days of playing Parsec on 
that TI in between epic Nerf football games in the backyard. 

Now Michael is all grown up and has moved on to much 
more mature interests, such as creating interactive web 
applications... and skateboarding. Gut, bruised, and often 
limping, he approaches tech challenges with the same 
reckless intensity as high-risk sports. After developing a few 
video games, inventing a couple of toys, writing dozens of 
computer books, and creating numerous online courses, 
Michael finally felt ready to tackle Head First JavaScript. He 
no longer trusts his feelings. 

As it turns out, you’re never really ready to write a Head First 
book. The best you can be is ready to pop the red pill and 
enter the Matrix that is Head First. Having emerged from the 
other side with a few intellectual bruises to add to his real 
ones, Michael will never look at learning (or teaching) the 
same again. And he’s thrilled about that fact. Right about 
now he’s with his wife next to their koi pond reflecting on 
the wonders of the interactive Web. 
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it WOUld be led by functions. Functions allow you to make JavaScript code 
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In reality, all but the simplest of scripts stand to benefit from a functional reorganization. 
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information from users with JavaScript. But you do have to be 

careful. Humans have this strange tendency to make mistakes, which means you 


can't always count on the data provided in online forms being accurate. Enter 
JavaScript. By passing form data through the right JavaScript code as it is being 


entered, you can make web applications much more reliable, and also take some 


load off of the server. We need to save that precious bandwidth for important 
things like stunt videos and cute pet pictures. 
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Slicing and Dicing HTML with the DOM 

Taking control of web page content with JavaScript is a lot 

like baking. Well, without the mess... and unfortunately, also without the edible 
reward afterward. However; you get full access to the HTML ingredients that go into a 
web page, and more importantly, you have the ability to alter the recipe of the page. So 
JavaScript makes it possible to manipulate the HTML code within a web page to 
your heart’s desire, which opens up all kinds of interesting opportunities all made possible 
by a collection of standard objects called the DOM (Document Object Model). 
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bringing data is Me 

Objects as Frankendata 

JavaScript objects aren’t nearly as gruesome as the good 

doctor might have you think. But they are interesting in that they combine 
pieces and parts of the JavaScript language together so that they’re more powerful 
together. Objects combine data with actions to create a new data type that is much 
more "alive" than data you’ve seen thus far. You end up with arrays that can sort 
themselves, strings that can search themselves, and scripts that can grow fur and 
howl at the moon! OK, maybe not that last one but you get the idea... 


Data 

var who; 
var what; 
var when; 
var where; 
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Actions 

function display(what, when, where) { 
} 

function deliver(who) { 
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crectting cust9tn objects 

Having It Your Way with Custom Objects 

If it was only that easy, we’d surely have it made. JavaScript doesn't 

have a money-back guarantee, but you can definitely have it your way. Custom objects 
are the JavaScript equivalent of a decaf triple shot grande extra hot no whip extra drizzle 
no foam marble mocha macchiato. That is one custom cup of coffee! And with custom 
JavaScript objects, you can brew up some code that does exactly what you want, while 
taking advantage of the benefits of properties and methods. The end result is reusable 
code that effectively extends the JavaScript language...just for you! 
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k!ll bugs deSid 

Good Scripts Gone Wrong 


Even the best laid JavaScript plans sometimes fail, when this 

happens, and it will, your job is not to panic. The best JavaScript developers are not 
the ones who never create bugs - those people are called liars. No, the best JavaScript 
developers are those who are able to successfully hunt down and eradicate the bugs 
they create. More importantly, top notch JavaScript bug exterminators develop good 
coding habits that minimize the sneakiest and nastiest of bugs. A little prevention can 
go a long way. But bugs happen, and you’ll need an arsenal of weapons to combat them. 
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dream through a programming technique known as Ajax that provides a mechanism for 
dramatically changing the “feel” of web pages. With Ajax, web pages act much more like 
full-blown applications since they are able to quickly load and save data dynamically 
while responding to the user in real time without any page refreshes or browser trickery. 


Touchy-Feely Web Applications 

The modern Web is a very responsive place where pages 
are expected to react to the user’s every whim, or at least that s 

the dream of many web users and developers. JavaScript plays a vital role in this 
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how to use this book 


Who is this book for? 

If you can answer “yes” to all of these: 


① 

© 

③ 


Do you have access to a computer with a web browser, a 
text editor, and an Internet connection? 


^11 help you Icav-h how {o 

Do you want to learn, understand, and remember , _ ^odc tha-t 

how to create web pages that are alive with energy , 匕 web pages do a\\ k'mds 

turning the Web into a truly interactive experience? 0 七 ^ 00 * thmgs that av-c 

possible with HTML alohe. 


Do you prefer stimulating dinner party conversation to 
dry, dull, academic lectures? 


this book is for you. 


Who should probably back away from this book? 


If you can answer “yes” to any of these: 


① 


© 


Are you completely new to creating web pages? 

(You don’t need to be an HTML guru, but you should 
understand the basics of how web pages go together 
with HTML and CSS, and how to post them online.) 



This book makes a yrtai sequel 

-to Head Pivs 七 HTML Wrtii 
CSS f )<ttTMU so dc-f mi-tcly 

cMtCk i*t ou*t i-f you y/3r\*t *to 
uD ov\ vou\r WTML. 


Do you hold a ninth degree black belt in Script Fu, and 
are really looking for a JavaScript reference book? 


③ 


Are you afraid to try something different? Would you 
rather have a root canal than mix stripes with plaid? 

Do you believe that a technical book can’t be serious if 
JavaScript code is anthropomorphized? 


this book is not for you. 



gWotc mairkc-tihg ： -this book is 
^ ah y° hC with a c>rtd\i UyA 3 
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the intro 


Wc know what youVc thinking 


“How can this be a serious JavaScript book?” 
“What’s with all the graphics?” 




“Can I actually learn it this way?” 

Wc kwow what your brain is thinking 




Your brain craves novelty. It’s always searching, scanning, waiting for something 
unusual. It was built that way, and it helps you stay alive. 


So what does your brain do with all the routine, ordinary, normal things you 
encounter? Everything it can to stop them from interfering with the brain’s 
real]oh — recording things that matter. It doesn’t bother saving the boring 
things; they never make it past the “this is obviously not important” filter. 


How does your brain know what’s important? Suppose you’re out for a 
day hike and a tiger jumps in front of you, what happens inside your head 
and body? 


And there’s no simple way to tell your brain, “Hey brain, thank you 
very much, but no matter how dull this book is, and how little I’m 
registering on the emotional Richter scale right now, I really do want 
you to keep this stuff around.” 


Neurons fire. Emotions crank up. Chemicals surge. 


And that’s how your brain knows... 


This must be important! Don’t forget it! 


But imagine you’re at home, or in a library. It’s a safe, warm, tiger-free zone. 
You’re studying. Getting ready for an exam. Or trying to learn some tough 
technical topic your boss thinks will take a week, ten days at the most. 

Just one problem. Your brain’s trying to do you a big favor. It’s trying 
to make sure that this obviously non-important content doesn’t clutter 
up scarce resources. Resources that are better spent storing the really 
big things. Like tigers. Like the danger of fire. Like how you should 
never have agreed to house sit for your friend with the pet anaconda. 


n/ovaV 

博、 s 

sa 


a- 


Great. Only 600 
more dull, dry, 
boring pages. 


you are here ► 


xxv 






how to use this book 





We 伽 W a “HeadBrsf reaaer ^ ^ 

mpthina^ First you have to get it, then make sure 

So what does it take to 咖 n u SOr yH h f na fact / nto yoU r head. Based on the 
you don，t forgets Ifs not about push.^gf^^^^ ^ educational psychology, 
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the intro 


Metacognition: thinking about thinking 

If you really want to learn, and you want to learn more quickly and more 
deeply, pay attention to how you pay attention. Think about how you think. 
Learn how you learn. 

Most of us did not take courses on metacognition or learning theory when we 
were growing up. We were expected to learn, but rarely taught to learn. 


I wonder how 
I can trick my brain 
into remembering 
this stuff... 



The trick is to get your brain to see the new material you’re learning as 
Really Important. Crucial to your well-being. As important as a tiger. 
Otherwise, you’re in for a constant battle, with your brain doing its best to 
keep the new content from sticking. 


But we assume that if you’re holding this book, you really want to learn how 
to create interactive web pages that sizzle. And you probably don’t want to 
spend a lot of time. If you want to use what you read in this book, you need to 
remember what you read. And for that, you’ve got to understand it. To get the most 
from this book, or any book or learning experience, take responsibility for your 
brain. Your brain on this content. 


So just how DO you get your brain to treat JavaScript 
like it was a hungry tiger? 


There’s the slow, tedious way, or the faster, more effective way. The 
slow way is about sheer repetition. You obviously know that you are able to learn 
and remember even the dullest of topics if you keep pounding the same thing into your 
brain. With enough repetition, your brain says, “This doesn’t feel important to him, but he 
keeps looking at the same thing over and over and over, so I suppose it must be.” 


The faster way is to do anything that increases brain activity^ especially different 
types of brain activity. The things on the previous page are a big part of the solution, 
and they’re all things that have been proven to help your brain work in your favor. For 
example, studies show that putting words within the pictures they describe (as opposed to 
somewhere else in the page, like a caption or in the body text) causes your brain to try to 
makes sense of how the words and picture relate, and this causes more neurons to fire. 
More neurons firing = more chances for your brain to get that this is something worth 
paying attention to, and possibly recording. 


A conversational style helps because people tend to pay more attention when they 
perceive that they’re in a conversation, since they’re expected to follow along and hold up 
their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” 
is between you and a book! On the other hand, if the writing style is formal and dry, your 
brain perceives it the same way you experience being lectured to while sitting in a roomful 
of passive attendees. No need to stay awake. 


But pictures and conversational style are just the beginning … 
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Here's what WE did: 


We used pictures, because your brain is tuned for visuals, not text. As far as your brain’s 
concerned, a picture really is worth a thousand words. And when text and pictures work 
together, we embedded the text in the pictures because your brain works more effectively 
when the text is within the thing the text refers to, as opposed to in a caption or buried in the 
text somewhere. 

We used redundancy : saying the same thing in different ways and with different media types, 
and multiple senses : to increase the chance that the content gets coded into more than one area 
of your brain. 



We used concepts and pictures in unexpected ways because your brain is tuned for novelty, 
and we used pictures and ideas with at least some emotional content, because your brain 
is tuned to pay attention to the biochemistry of emotions. That which causes you to feel 
something is more likely to be remembered, even if that feeling is nothing more than a little 

humor, surprise, or interest. 

We used a personalized, conversational style, because your brain is tuned to pay more 
attention when it believes you’re in a conversation than if it thinks you’re passively listening 
to a presentation. Your brain does this even when you’re reading. 



We included more than 80 activities, because your brain is tuned to learn and remember 
more when you do things than when you read about things. And we made the exercises 
challenging-yet-do-able, because that’s what most people prefer. 

We used multiple learning styles, because might prefer step-by-step procedures, 
while someone else wants to understand the big picture first, and someone else just wants to 
see an example. But regardless of your own learning preference, everyone benefits from seeing 
the same content represented in multiple ways. 

We include content for both sides of your brain, because the more of your brain you 
engage, the more likely you are to learn and remember, and the longer you can stay focused. 
Since working one side of the brain often means giving the other side a chance to rest, you 
can be more productive at learning for a longer period of time. 

And we included stories and exercises that present more than one point of view, 
because your brain is tuned to learn more deeply when it’s forced to make evaluations and 
judgments. 






We included challenges, with exercises, and by asking questions that don’t always have 
a straight answer, because your brain is tuned to learn and remember when it has to work 
at something. Think about it — you can’t get your body in shape just by watching people at 
the gym. But we did our best to make sure that when you’re working hard, it’s on the right 
things. TYidit you 9 re not spending one extra dendrite processing a hard-to-understand 
example, or parsing difficult, jargon-laden, or overly terse text. 

We people. In stories, examples, pictures, etc., because, well, because j ⑽ Ye a person. 
And your brain pays more attention to people than it does to things. 
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Here's what YOU caw do to bend 
your brain iwto submission 

So, we did our part. The rest is up to you. These tips are a 
starting point; listen to your brain and figure out what works 
for you and what doesn’t. Try new things. 

Cu-fc this out «>hd s-fci^k i-fc 

° h y° u,r 


Slow down. The more you understand, 
the less you have to memorize. 

Don’t just read. Stop and think. When the 
book asks you a question, don’t just skip to the 
answer. Imagine that someone really is asking 
the question. The more deeply you force your 
brain to think, the better chance you have of 
learning and remembering. 

( 2 ) Do the exercises. Write your own notes. 

We put them in, but if we did them for you, 
that would be like having someone else do 
your workouts for you. And don’t just look at 
the exercises. Use a pencil. There’s plenty of 
evidence that physical activity while learning 
can increase the learning. 

^3^ Read the “There are No Dumb Questions” 

That means all of them. They’re not optional 
sidebars — they We part of the core content! 

Don’t skip them. 

^4^ Make this the last thing you read before 
bed. Or at least the last challenging thing. 

Part of the learning (especially the transfer to 
long-term memory) happens after put the 
book down. Your brain needs time on its own, to 
do more processing. If you put in something new 
during that processing time, some of what you 
just learned will be lost. 

^5) Drink water. Lots of it. 

Your brain works best in a nice bath of fluid. 
Dehydration (which can happen before you ever 
feel thirsty) decreases cognitive function. 


Talk about it. Out loud. 

Speaking activates a different part of the brain. 

If you’re trying to understand something, or 
increase your chance of remembering it later, say 
it out loud. Better still, try to explain it out loud 
to someone else. You’ll learn more quickly, and 
you might uncover ideas you hadn’t known were 
there when you were reading about it. 

^7^ Listen to your brain. 

Pay attention to whether your brain is getting 
overloaded. If you find yourself starting to skim 
the surface or forget what you just read, it’s time 
for a break. Once you go past a certain point, you 
won’t learn faster by trying to shove more in, and 
you might even hurt the process. 

^8^ Keep it real! 

Your brain needs to know that this matters. Get 
involved with the stories. Make up your own 
captions for the photos. Groaning over a bad joke 
is still better than feeling nothing at all. 

^9^ Just do it! 

There’s only one way to learn JavaScript: writing 
a lot of JavaScript code. And that’s what you’re 
going to do throughout this book. Don’t just skip 
over the JavaScript exercises — a lot of the learning 
happens when you solve problems, even unusual ones 
like Stick Figure Adventure, the Mandango macho 
movie seat finder, and the YouGube blog. And 
definitely stick with an exercise and get it working 
before you move on to the next part of the book. Oh, 
and if you have an interactive web project you’ve 
been dreaming about, don’t be afraid to build it as 
you work through the book and add to your shiny 
new bag of JavaScript programming tricks. 
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Read Me 

This is a learning experience, not a reference book. We deliberately stripped out everything 
that might get in the way of learning whatever it is we’re working on at that point in the 
book. And the first time through, you need to begin at the beginning, because the book 
makes assumptions about what you’ve already seen and learned. 


We teach JavaScript on a “need to know” basis. 

If you’re looking for a history of JavaScript, keep on looking because this book won’t help. 
The goal here is to teach you how to do cool, practical things in JavaScript to amp up the 
interactivity of web pages, turning them into responsive web applications that people 
will want to experience. We forego formalities, and only teach the JavaScript concepts 
you need to know to do real things, in real time. Really. 


We don’t cover every hidden nuance of the JavaScript language. 

While we could have put every single JavaScript statement, object, event, and keyword in 
this book, we thought you’d prefer a reasonably portable book that doesn’t require a forklift 
to carry from your desk to the gym. Oh yeah, it’s a great workout read, but you might want 
to invest in a sweat-proof pencil! We focus on the parts of JavaScript you need to know, the 
ones you’ll use 95 percent of the time. And when you’re done with this book, you’ll have 
the confidence to go look up that elusive method you need to finish off that killer script you 
just dreamed up in the shower. 

Since JavaScript includes a huge built-in library of reusable code, it’s important to 
understand when you’re dealing with standard JavaScript code, as opposed to custom code 
that you create. Any time you see the word “custom,” that means the code is custom built 
by you, and not a built-in part of JavaScript. 

We encourage you to use more than one browser with this book. 

Even though all modern web browsers support JavaScript, there are sometimes subtle 
differences in how they handle certain JavaScript code. So, we encourage you to pick at 
least two up-to-date browsers and test your scripts using them. We’ve found Firefox to 
currently be a superior browser for helping track down JavaScript coding errors, but your 
scripts will ultimately need to run consistently on a variety of different browsers. Don’t 
hesitate to get your friends, family members, co-workers, and highly trained pets to help 
test out your scripts in their browsers. 


XXX 
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The activities are NOT optional. 


The exercises and activities are not add-ons; they’re part of the core content of the 
book. Some of them are to help with memory, some are for understanding, and some 
will help you apply what you’ve learned. Don } t skip the exercises. The crossword 
puzzles are the only thing you don’t have to do, but they’re good for giving your brain a 
chance to think about the words and terms you’ve been learning in a different context. 
And the Page Benders, well those are optional too if you hate the thought of creasing 
these beautiful pages. But you’ll miss out on some fun. 


The redundancy is intentional and important. 

One distinct difference in a Head First book is that we want you to really get it. And we 
want you to finish the book remembering what you’ve learned. Most reference books 
don’t have retention and recall as a goal, but this book is about learnings so you’ll see some 
of the same concepts come up more than once. 


The examples are as lean as possible. 

Our readers tell us that it’s frustrating to wade through 200 lines of an example looking 
for the two lines they need to understand. Most examples in this book are shown within 
the smallest possible context, so that the part you’re trying to learn is clear and simple. 
Don’t expect all of the examples to be robust, or even complete — they are written 
specifically for learning, and aren’t always fully-functional. 

We’ve placed the complete code for all of the examples on the Web so you can copy and 
paste it into your text editor and explore. You can also play around with the finished 
scripts online. You’ll find them at: 

http:/ / www.headfirstlabs.com/books/hfjs/ 


The Brain Power exercises don’t have answers. 


For some of them, there is no right answer, and for others, part of the learning 
experience of the Brain Power activities is for you to decide if and when your answers 
are right. In some of the Brain Power exercises, you will find hints to point you in the 
right direction. It’s your brain...feel its power! 
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1 th^ interactive Web 


Reacting to the Virtual World 


% 



Oh my stars! I didnt realize the Web 
could be so 、、 feely .〃 Does it know what 
rm thinking right now? 


Tired of thinking of the Web in terms of passive pages? 

Been there, done that. They’re called books. And they’re good for reading, learning... 
lots of good things. But they’re not interactive. And neither is the Web without a 
little help from JavaScript. Sure, you can submit a form and maybe do a trick here 
and there with some crafty HTML and CSS coding, but you’re really just playing 
Weekend at Bernie’s propping up a lifeless web page. Real live interactivity requires 
a bit more smarts and a little more work... but it has a much bigger payoff. 


this is a new chapter 



needy users 


(Online) people have needs 

All right, we know the Web is virtual, but the people on the Web are real 
people, with real world needs. Needs like searching for a killer meatloaf 
recipe, downloading their favorite song by Meatloaf, or something even 
as huge as shopping for a new home. Fortunately, the Web differentiates 
when it comes to prioritizing your needs! 



Ready to find a new house? 


Enter your annual in&onne: 80000 < 
Enter the number of bedrooms: i 


Enter your ZIP code: 95014 


Finally, an easy way to buy a 
house online. Type in my income 
and what I*m looking for and 
the rest is automatic. 
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the interactive web 


Like talking to a brick wall... nothing happens 

The Web isn’t always as responsive as it could be. In fact, it can sometimes 
feel downright cold and unfeeling, detached from the outside world and 
unresponsive to the needs of its many users. You would expect that entering 
data like this would generate some sort of response...but nothing happened. 

Don’t take it personally; the static Web just doesn’t know better. 



Is anybody there? 


you are here 


Uscv" ihfu 七 … s*t>ll 




^ Jt Q Q O 


House Finder 


Ready to find a new house? 


Enter your annual income: S0000 


Enter the number of bedrooms ： J 


Enter your ZIP code ： j95014 













interactivity with javascript 


Put JavaScript talks back 

JavaScript flips the switch that turns a web page into an interactive 
experience. It powers things that can listen to your needs, process your 
input, and respond to your deepest desires. OK, perhaps that’s a stretch, 
but JavaScript can turn a web page into an interactive application as 
opposed to a static, lifeless page, and that’s a good thing! 




©00 


House Finder 


Ready to find a new house? 


Enter your annual income: |8Q000 
Enter the number of bedrooms: |3 


Enter your ZIP code: 95014 
Calculate Price | Shop for Houses | 


Done 


C 


lick! 


click! 


A 


TV^c iascv c\\cks a 

bo yt v-csults. 


JavaS^ipt goes -to wovk ih 
\rcspohSC -to usc\r adtiohs. 


JavaScript trings a wet page to tile ty 
allowing it to responct to a user’s input* 


4 Chapter 1 



















the interactive web 
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HTML, CSS, and JavaScript 

iwter 

Lights, camera/ action! 


JavaScript sits with HTML and CSS as one of the three pieces of modern 
Web page construction. HTML provides the structure, CSS adds the 
style, and JavaScript puts the rubber to the road and makes things happen. 
To find the path to an interactive web page, you must follow the trail of 
structure (HTML) to style (CSS), and then to action JavaScript). 
Similar to CSS, JavaScript code often resides right there in the web page. 


<html> 

<head> 

• • • 

</head> 

<body> 

<div id= fl frame 11 > . 

<div id="header">Ready to find a new 

<div id="left"> „ , 

<img src="house.png" alt="House / 

</div> 


STRUCTURE 


house?</div> 


[TML 


> 


<form name= 
<div clas| 
<input 
</div> 

<div clas| 
<input 
</div> 

<div cla^| 
<input 
</div> 
<input t;l 
<input tyi 
</form> 
</div> 

</body> 

</html> 


〈style type= n text/css n > 

body { 

font : 14px arial ； 

text-align:center; 


#frame { 

width •• 40 Opx; 

} 

#header { 

font : 16px arial; 

font - weight•bold; 
margin - bottom:15p^| 


#left { 

float: left; 
width:11Opx; 


div.field { 

margin-bottoin: I0p| 

text-align:right;r 


STYLE 


CSS 


</style> 


HTML pv-ovidcs 

七 he -fvamowovk. 


<script type=” text/javascript "〉 
function validateNumber(value) 

// Validate the number 

//if ( !isNumber(value)) 

alert("Please enter a number.*)’ 

} 

function validateZIPCode (value) { 

// validate the ZIP code 

//if (lisZIPCode(value)) YYYyy 

" . 7TP rndp in the form XXXaa.; 

alert ( n Please enter a ZIP coae 


function calcPriceO { 

var maxPrice "■ i no ^ 4 * 

document.getElementByld("income ).v 卞 e ^ 
alert("You can afford a house that costs up to $ 

maxPrice + n . n ); 


function findHouses (form) { 

var bedrooms = ■>■<”、• 

document.getElementByld("bedrooms )-value, 

var zipCode = 

document. getElementByld ("zip") • value，• 

// Display a list of matching houses from the server 
form.submit(); 

</script> 


ACTION! 


JavaScript 


CSS adds 
visual piziazi- 



IbvaSdv-ip-t ihjedts 

Ah 乙七 iohal sizilc ； 
owihg -the page -to 
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the interactive web 




JavaScript springs 
into action wken tke 
user asks tke page 
to perform a task. 


丁 he pieces -the av-e 
thcv-c, but -they av-ch ； t 

ahd I 把 k visual flaiv... 


0 0 0 Hou^e Finder 

Ready K> find a new house? 


Thanks for listening, JavaScript! 
rm well on the way to finding the 
bachelor pad of my dreams. 


Enter your annya^jvconi^ 
Enter ihc num\ 


Enter yoor ZIP 


0 


House Finder 


Ready to find a new house? 


Dorve 


[nter your annual income: fBOOOO 
Enter tha numbar of bedrooms: 


Enter your ZIP code: 

Calculate Price | Shop ^or Holies 


TV^c 'oob —A 
but \i docsn 七 

(jio d >wV\olc lot* 


Moyj *tiic actually 
does 


You can 


afford a house that costs up to SPOOOO. 


you are here ► 




























why add JavaScript? 


Can’t you do all the same 
stuff with HTML and CSS? 
The Web was still pretty cool 
before JavaScript, you know. 



HTML and CSS aren't really interactive 

The problem is that HTML and CSS aren’t really interactive. There 
certainly are CSS tricks you can use to manipulate styles in very specific 
situations, such as mouse hovers over links, but your options are fairly 
limited if you’re using just HTML and CSS. 

JavaScript allows you to detect just about anything that takes place in 
a web page, like a user clicking buttons, resizing the browser window, 
or entering data into a text field. And since JavaScript is a scripting 
programming language, you can learn to write code to respond to these 
user interactions, like performing a calculation, dynamically swapping 
images on the page, or even validating data. 


o 


Don’t sweat the JavaScript details, 
at least not yet. 

Although JavaScript is capable of doing 
all sorts of things, We know you’re at 
the beginning of your journey. Rest assured that events, 
functions, and many other pieces of the JavaScript puzzle 
will come together in time. Besides, you’re probably 
further ahead of the game than you realize. 



HTML + CSS + JavaScript = REAL Interactivity 
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the interactive web 


:^|j^rpei your pencil 


You already know more than you think. Look at the code for the 
House Finder web page, and write down what you think each 
circled chunk of JavaScript code is doing. It’s okay to guess. 


<html> 

<head> 

<title>House Finder</title> 

〈script type= M text/javascript"> 
function validateNumber(value) 

// Validate the number 
"if (!isNumber(value)) 
alert ( n Please enter a number. 

function validateZIPCode(value) 

// Validate the ZIP code 

//if ( !isZIPCode(value)) ” 

alert ("Please enter a ZIP code in the form XXXXX."). 


£Un ^S^Tce'= document. aetElementByld ( - income" ) .value , 么 
alert ("^ou can attord a house that costs up to $” + maxPnce 

function. findHouses (form) { 

var bedrooms = document.getElementByld("bedrooms - ).value; 
var zipCode = document.getElementByld("zip").value, 

// Display a list of matching houses from the server 
form.submit(); 

</script> 

</head> 


"v> 


<body> 

<div id=”frame ”〉 

<div id="header M >Ready to find a new house?<^ 

<div id="left M > 

<img src="house.png" alt=”House” /> 

</div> z mlI 

〈form name="orderform M action="../^nethod="POST > 
<div class=”field”>Enter your^nnual income: 

^vr)R= , 'jfext , ' size 二 12” . 

^ynblur="validateNumber(this.value) "7^</div> 
<div^class=''iield''>^nter the number of bedrooms : 
〈input id=”bedrooms n type="text" size=”6” 
onblur="validateNumber(this.value) ” /></div; 
<div c lass=”field”>Enter your ZIP code: 

〈input id=”zip” type="text" size^lO . 

onblur=”validateZIPCode 
<i nput tvpe=”button” value= , 'CaTr!i-ilcLl^^TTce 1 
-nn^Tir^k="calcPrice() ; M /> 
<input" r type="button M value="Shop for Houses 

onclick = "find_Houses (this . form) ; /> 

</form> 

</div> 

</body> 

</html> 


you are here ► 
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sharpen solution 


(^Sharpen your pencil 

Solution 


You already know more than you think. Take a look at the code for 
the House Finder web page, and write down what you think each 
circled chunk of JavaScript code is doing. It’s okay to guess. 


<html> 

<head> , 

<title>House Finder</title> 

〈script type="text/javascript > 
function validateNumber(value) 

// Validate the number 
"if (!isNumber(value)) 

alert ("Please enter a number. 

} 



Action validateZIPCode (value) { 了 

// Validate the ZIP code 

// if (lisZIPCode (value)) XX XXX, 

alert ("Please enter a ZIP coae in _ 


alert ("iou can alloid ^ house tnar co.ts up to 

===== 二 

var zipCode = document.getElementById( z iP ).val , 

// Display a list of matching houses from the server 
form.submit(); 

</script> 

</head> 

<body> 

<d < ； ifld-h ：： dL->Read y to find a new h ouse ? </div> 

<div id="left"> 

<img src="house.png" alt="House 
:’ 二 ― acti^ 

<div class="field">Ente^our annual . 

_.iii id / 1 ? A/pe="text si ze 

onblur=" validateNumber (this . valuetj"/>< /div> 

<d l f dasd 七 the"^er^f bedrooms 
<input icL="bedrooms" type="text > 

onblur="validateNumber(this.value) / 

<div class="field">Enter your ZIP code: 

<input id="zip" type="text^ize- 

Houses' 

onclick="findHouses (this . form) , /> 

</form> 

</div> 

</body> 

</html> 


)； 


t\\s uscv- *b> a 

IP Code \ y \ 

mat ><><><><><. 


■ 乙七)化 maximum 
p\ri^c as -fouv times 
user’s mdome- 


IH 




Validates 七 he mdomc 


-field *bo make su\rc a 
v/ds 


value o( *thc Z^IP 
todt mpu 七 -f ield- 


<inpi 

^"onc 


lakuld^tes maximum house 

■_ide v/hch the usev* dlidks -the 

■ . 

Hakulate Pride button. 
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the interactive web 


Use the <script> tag to tell the 
browser youYc writing JavaScript 

For now ， we’re going to put JavaScript directly into an HTML web page, 
just like you saw on the last page. The first thing you have to do is let 
the web browser know that we’re about to give it JavaScript, instead of 
HTML... and that’s where the 〈 script〉tag comes in. 

You can add a 〈 script〉tag anywhere in your HTML, but it’s usually 
best to put it in the <head> of our web page, like this: 



<html> 

<head> 

<title>House Finder</title> 


<script type="text/javascript"> 


This sMyi tag says that 
ahy-thihg a-f-tcv- i-t is a 

办—呼 ... c 

\s JavaS ㈣ 


切 ? I 


t 


ivx<to a novwai 
HTML 呼 
usuallY 

V^edd sc6*t'»ov\. 


function validateNumber(value) { 

// Validate the number 
// if (!isNumber(value)) 
alert ("Please enter a number.") 


u 


</script> 

</head> tells tKe W 祕伏 

<body> 如七 ^o^al HTML .s ⑽ 3 

<!—— All the rest of your HTML --> 


</body> 

</html> 


Evcv-y*th'm^ between the By\A 

dlos’mg s^rip 七 tajs is JavaScript., the 
bv-ov/sev k^ows *to this as a 

^o*t ttTAIL. 


therejcire no ^ 

Dumb Questions 


So anything I put inside the 
<script> tag is JavaScript? 

Not necessarily... the 〈 script 〉 
tag tells the browser that a scripting 
language is coming, but it doesn't have to be 
JavaScript. The type part, type=" text/ 
j avascript", is what lets the browser 
know you're about to give it JavaScript 
specifically. 


So are there other scripting 
languages I can use? 

Absolutely. Microsoft has a couple of 
varieties like VBScript (a scripting version of 
Visual Basic) and their flavor of Ajax, called 
ASP.NET AJAX. We'll talk more about Ajax 
in Chapter 12, too. And there are several 
other scripting languages you can use. But 
for our purposes, well always use text/ 
j avascript in this book. 


Do my <script> elements have to 
be in the <head> part of my HTML page? 

That’s a good catch. You can put 
<script> elements anywhere in your 
web page... but it’s generally considered 
bad practice to put them anywhere but the 
<head> of your web page. It's kind of like 
putting CSS in the middle of a web page... 
it’s usually better to separate the JavaScript 
out, and the <head> of your page is a 
perfect place to do that. 


you are here ► 
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telling the browser what to do 


Your web browser can handle 
HTML, CSS, AN£ JavaScript 

You already know that a web browser knows how to take your 
HTML and display it. And you’ve used CSS to tell the browser how 
to show different parts of your HTML. Think of JavaScript as just 
another way to talk to the browser... but instead of telling the browser 
how to display something (like in HTML or CSS), you’re giving the 
browser some commands to follow. 



You opch up a web 
bv-owsc\r BY\d type 
\ y \ d URL... 


The Wov/scv - d»sfl3Y s 
WTI\/[L v-ulcs, 

all Jfvow i\\t 州 c … 


❺ The web sevvev- … 




❺ The wveir —s y 败 
web bmowscir a -Pull 
^ WT/WL CSS 

v-ulcs ; ^hd 山 vaS 乙 Hpt 




Web Page 



Web Server 


® khows 


, r，M K * r »ows K ow / , 

ljk hy 
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the interactive web 



Dumb Quest! 


9ns 


How do web browsers run 
JavaScript code? 


Considering the Web’s security 
problems, is JavaScript safe? 


A: Web browsers have a special piece 
of software inside them called a JavaScript 
interpreter, and its job is to run JavaScript 
code that appears within a page. This is why 
you might have heard JavaScript described 
as an interpreted language, as opposed to 
a compiled language. Compiled languages, 
such as C++ or C#, must be converted by 
a tool called a compiler into an executable 
program file. It isn’t necessary to compile 
JavaScript programs because JavaScript 
code is interpreted directly by the browser. 


How do I tell a web page to start 
running JavaScript code? 


A 


Most JavaScript code is run when 
something takes place within the page, such 
as the page being loaded or the user clicking 
a button. A JavaScript mechanism known as 


an “event” allows you to trigger a piece of 
JavaScript code when something of interest 
happens to the page. 


Yes, for the most part. JavaScript is 
designed from the ground up to prevent 
malicious code from causing problems. For 
example, JavaScript doesn’t allow you to 
read or write files on the user’s hard drive. 
This limitation wipes out the potential for 
a lot of viruses and similarly evil code. Of 
course, this doesn’t mean you can’t write 
buggy JavaScript code that makes web 
pages a pain to use, it just means you're 
unlikely to put users in serious jeopardy with 
JavaScript. And for the record, browser bugs 
and crafty hackers have figured out ways to 
breach JavaScript security in the past, so it’s 
certainly not bulletproof. 

So about that <script> tag in 
the House Finder code... Is it HTML or 
JavaScript? 

The <script> tag itself is HTML, 
and its purpose is to provide a way to blend 
script code with the HTML code. The code 
appearing inside the 〈 script 〉 tag is 
JavaScript code. Since the 〈 script 〉 
tag is designed to support multiple script 


languages, you indicate that the code is 
JavaScript code by using its type attribute. 

I’ve seen web pages that have 
interactivity, such as forms that check to 
make sure a date is entered correctly, and 
they seem to do it without JavaScript. Is 
this possible? 

Yes. It's possible to get interactivity 
in web pages without JavaScript, but in 
many cases it's inefficient and clunky. For 
example, data validation on forms can be 
handled on the web server when you submit 
the form. However, this means you have to 
submit the entire form and then wait for the 
server to do the validating and return the 
results as a new page. You might as well 
validate the form with paper and pencil! 
JavaScript interactivity occurs entirely within 
the browser without loading a new page, 
eliminating the unnecessary passing of data 
back and forth to a server. Not only that, 
but a great deal of what JavaScript has to 
offer in terms of interactivity cannot be done 
any other way without third party browser 
add-ons. 



Identify each piece of code of as being part of the standard JavaScript language, 


w/ \ ^ 

ExGRciSe 

or a custom piece of code created by a programmer for the House Finder 
web page. 


alert 

JavaScript / Custom 

onblur 

JavaScript 

1 Custom 

calcPrice 

JavaScript / Custom 

onclick 

JavaScript 

/ Custom 

zipCode 

JavaScript / Custom 

findHouses 

JavaScript 

/ Custom 

var 

JavaScript / Custom 

value 

JavaScript 

1 Custom 


you are here ► 
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exercise solution 


BceitciSe 

%oLvi\OH 


Identify each piece of code of as being part of the standard JavaScript 
language, or a custom piece of code created by a programmer for the House 
Finder web page. 

Tiic fop-up bo% 七 ha 七 

lidatcs mvalid ⑽眯 bc\r. 



<head> , 

<title>House Finder</title> 

〈script type="text/javascript"> 
function validateNumber(value) 

// Validate the number 
"if (!isNumber(value)) 
alert ("Please enter a number. 

function validateZIPCode(value) 

// Validate the ZIP code 

// if disZIPCode (value)) m ^ 

alert ("Please enter a ZIP coae m_ 

} 


alert 


lavaScrior / Custom 


Custom 


cM^vk <Jc Code 




tulatcs *tV^c house pv-"^c 

■ lcPrice 


JavaScript /(Custom^) 


|$ts aside a s-to\ra^e lo^aiioh 

|fo\r a <^P daia. 


■k 


7 alert("You can afford a house that costs up to ^ _ 


var 


CJavaScripTy Custom 


')； 


var zincode = document. g etElementById( zxp ).val 

// Display a list of matching houses from the server 
form.submit(); 

</script> 

</head> 

<body> 

<d <div d id="header">Ready to find a new house?</div> 

<div id="left"> „ / 

<img src="house.png" alt=”House / 

<cLiv claa^field">Enter your annual . 

<inpi£ ， id="income" type="text size- 
onbl 良 ” validateNumber (this 二 . 

<div class="field">Enter the number of = . 

<input id="bedrooms" type="text '二 > 

onblur="validateNumber(this.v^lue) / 

<div class="field">Enter your Zl^ode: 

<input id=”zip” type="text" size^^ 


Cus-fcom todt that 
•ihds houses. 


findHouses 


JavaScript (^CustonT) 


zipCode 


JavaScript 


A s-to\ragc lodatioh used -to hold the 
ZiP todt chtc\rcd by the 


usev-. 


onblur 


(^JavaScripT) Custom 

\r\A\caits i\\ai *tKc user's moved 
ov\bo the mfut f ield. 


〈input ia=i 斗 'text" size /di 

onblur^validateZIPCode (thxs value) 

<input type="button" value=-'Calculate Pnce 

onclick="calcPrice();”/> 

<in P ut type-button" value-Shopper Houses 
onclick="findHouses (this, form) ; /> 

</form> 

</div> 

</body> 

</html> 


vaii^ (javaScripTy Custom 

TKc tuv-v-cy\*t value *tiic 
ZIP todt mpu 七 -field. 


oncii^k QavaScripty/ Custom 

l^aies ihai -the Shop 
bu-t-toh has bcch disked. 
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the interactive web 


Man's virtual best friewd... needs YOUR help 


Fresh off of a successful gig writing HTML and CSS pages, you’ve 
been called into your boss’s office to see his latest online invention: 
the iRock. The virtual pet is making waves at all the toy conferences, 
but beta users are really unhappy with the online pet. 


We/s the \Rock so 



you are here ► 
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game plan for interaction 


Making (Rock mtcractive 

Not only is it up to you to make the iRock interactive, but 
you’re going to have to learn some JavaScript along the way. 
That’s okay, though, you’ll have that pet rock saying hello in 
no time. 

Here’s what you’re going to do in the rest of this chapter: 


o 

❺ 


Create the iRock HTML web page. 


You already how 
*to do this. 



Add a JavaScript alert to make the ^~' 
rock greet users when the iRock 
web page is loaded. 


s • 呷 le box. 


❺ 

o 


Write JavaScript code to ask for the 
user’s name, print out a personalized 
greeting, and make the rock smile. 


Add an event handler so that when 
users click on the rock, the code you 
wrote in step 3 runs. 


YouVc 

七 he uscv- 

does, like didkmj -the 
viv-tual pc*t v-odk... 


… wi*feh ad-tivi-ty 
you desijh. 



❺ Win the admiration and lavish 
gratitude of your boss. 
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the interactive web 


Create the (Rock web page 


You couldn’t find a much simpler HTML page than the iRock. Go 
ahead and type this HTML into your favorite editor, and save it 
as iRock. html. You can download the pet rock images from the 
Head First Labs web site, at http://www.headfirstlabs.com. 




㉝ “ 。 〜 s 诎二 

肀 … ho Woh — your boss 
^ds y 0 ^ help. 1 


<html> 

<head> 

<title>iRock - The Virtual Pet Rock</title> 
</head> 

<body> 

<div style="margin-top : 1 OOpx; text-align : center’▼> 
<img id= n rockImg" src="rock.png" alt="iRock" / > 
</div> 

</body> 

</html> 



Be sure do^load 


谷⑽如 o 於 W 
Head Labs site 



irock.html 


Test drive 

Before you go any further, save and test out your iRock 
web page in your web browser. Make sure yours looks 
like ours, because we’re about to start adding some 
interactivity, JavaScript style. 


\vAst a ^ 

users- 



tliereiare no o 

Dumb Questi9ns 

Is that CSS in the <div> tag? 

A- 

r \* Sure is. Good catch there. 


I thought it was a really bad idea to put CSS 
directly into an HTML page. What gives? 


A 


You've been reading Head First HTML with CSS & 
XHTML, haven’t you? Yes, you're right, it’s usually better to 
put your CSS in a 〈 style 〉 tag in your page’s <head>, 
or in an external stylesheet. But your boss isn’t much of a 
coder, and besides, it makes this first example a lot simpler. 
But if you want to go ahead and write your own external 
stylesheet for the iRock, we think that would be pretty cool. 


you are here ► 
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getting started with events 


JavaScript cvcwts: giving the (Rock a voice 

To use JavaScript to greet the user when the page first loads, we’ll have 
to solve two main JavaScript-related problems: knowing when the page 
finishes loading and knowing how to display a greeting so that the user 
can see it. 

The first problem involves responding to an event (the page load event), 
while the second problem involves using a built-in JavaScript feature, the 
“alert” box. Events are JavaScript notifications that let you know when 
something of interest has happened, such as a page loading (onload) or 
a button getting clicked (onclick). You can respond to events with your 
own custom JavaScript code. 


The toAt -fov* "the OKtlodd 
eveKrt is sci us*mg the o^lodd 
attvibu-tc o( -the <body> 
"taj -the iRodk web paje- 



T\\t oAoaA e 心七 is 
\N\\tY\ iRo^k fay 
lodd'm^ m the bvov/sc\r. 


Events are notifications 
tkat you can responct to 

witk JavaScript code* 



Tlic alcvtO -tells 

bvoy/sev *to display alcvt 

bo% yeets usev. 
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the interactive web 


Alcrtiwg the user with a function 

A JavaScript alert is a pop-up window，or box, that you can use to display 
information to the user. Displaying an alert box involves writing code to 
call the JavaScript alert () function and passing it the text you want 
to display. Functions are reusable chunks of JavaScript code that perform 
common tasks, such as displaying information in a pop-up window. 


I /\ ^_l/Vhe 灼 you see immediately 

ftlCrtw ^ bo a JavaSdv-ipi Code, 

its o*f 七⑶ a *Puh^tio 灼 . 


alcv-t is o-f louil 七一 m 

displays a” alev 七 bo%. 



This is "the "to be 
displayed ih the alcv-t 
box-r^akc suv-c you put 
•七 bctwcch Quotes. 


Al^it Xip Ckse 



^vevy JavaStv-ip*t 仏灼乙七丨。灼 uses 
pavcv\*tiicscs *to cr\tlosc *tV^c m-fo\rw\atioir\ 
be'm^ passed *to -fu^dtior\—m 七 Wis 
匕 ase, *to be displayed- 




A scmi^oloh mav-ks 
七 he Chd o*p a lihC 

CoAtt kihd 
o( like the pev-iod 
"the Chd o-p S SCh"tch^C. 


When you pull it all together, you get a complete line of JavaScript code 
that calls a function to display greeting text in an alert box: 



Functions are reusable 
pieces oi code tkat 
perform common tasks. 


The text -to be displayed 
is placed withih a paiv- o*f 
^postv-ophes o\r Quotes. 


o 


Don’t stress 
over events. 

If all this 
event stuff 
seems like a buzz kill, don’t 
worry about it because events 
will continue to unfold (and 
make more sense) as you work 
through the book. 



you are here ► 
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saying hello with an event 


Add the (Rock greeting 

So to greet users when they load the iRock page, you need to add an 
onload event handler, and a greeting by using JavaScript’s alert () 
function. Add this line of JavaScript into your irock. html page: 


tvc 灼 七 how# 七 h 
。灼 load cvcvrb 
allies *to 

you 

sc*t 3 s ^ 
atbriW 七 c d 
i\\t <bod7> 
because i\\t body 
of a *»s 七 he 

part *tV^a*t is v\s\klc 

• m a Wov/scv. 


<html> 

<head> 

<title>iRock - The Virtual Pet Rock</title> 
</head> 

〈body onload= n alert ( 丨 Hello, I am your pet rock .’） 

<div s tyle= M margin-top: lOOpx; text-align: center ’’〉 
<img id= M rockImg M src= M rock.png M alt= M iRock" /> 

</div> 

</body> 

</html> 


> 



m = ih 



Test drive your interactive rock 


irock.html 


The iRock page is now a touch more interactive thanks to an alert box 
greeting that is displayed in response to the onload event. Load up irock. 
html in your web browser, and see what happens: 
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the interactive web 


tWeiare no o 

Dumb Questions 




Where do events come from? 


Although events are initiated by a user, 
they ultimately come from the browser. For 
example: a “key press” is an event triggered 
by the user but the browser must package 
up information about the event (like which 
key was pressed) and then pass it along to a 
function that has been designated to respond 
to the event. 


Are there other built-in functions 
like the alert() function? 

Yes, lots of them, alert () is 
just the tip of the iceberg when it comes to 
built-in reusable JavaScript code. We'll cover 
a lot of the standard functions as we journey 
through the features of JavaScript. By the 
end of the book you'll even be creating your 
own custom functions. 


BULLET POINTS 

■ Events are used to 
respond to web page 
happenings with 
JavaScript code. 

■ The onload event is 
triggered when a page 
finishes loading. 

■ You respond to the 
onload event by setting 


What happens to events that don’t 
have code tied to them? 

If a tree falls and no one is around to 
hear it, does it make a sound? Same deal 
with events. If you don't respond to an event, 
the browser goes about its business and no 
one is the wiser. In other words, responding 
or not responding to onload has no 
bearing on the page actually loading. 

Didn’t you say that JavaScript code 
belonged in <script> tags? 

It usually does. But you can also put it 
directly in an event handler, like we did with 
the onload event. And, when you need 
to run just a single line of JavaScript, like for 
the iRock, that’s often a simpler approach. 


Why does the iRock onload code 
mix quotes and apostrophes? 

HTML and JavaScript require you to 
close a sequence of text before starting 
another one... unless you use a different 
delimiter (quote or apostrophe). So in cases 
where JavaScript code appears in an HTML 
attribute (text within text), you have to mix 
quotes and apostrophes to work around this 
problem. It doesn't matter which ones you 
use for the attribute or the JavaScript text, 
but whatever you choose—you'll have to 
be consistent. Maybe an example of quotes 
and apostrophes in language will clear 
things up...according to the iRock, “The user 


clicked and said, 'Hello there.’ 




1 


4 r — 专 


■ 


■ 


■ 


the onload attribute of 
the <body> tag. 

Functions allow you to 
bundle JavaScript code 
into reusable modules. 

Some functions require 
you to pass them 
information to complete 
their task. 

The alert () function 
is a built-in JavaScript 
function that displays a 
text message in a small 
pop-up window. 



Match each piece of JavaScript code to what it does. 


onload 


Display a text message in a pop-up window 


0 


Terminate a line of JavaScript code 


alert 


Indicate that the web page has finished loading 


Enclose the information passed into a function 
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adding a personal touch 


I 



Now lef s make the (Rock 
really interactive 


You’re making some progress toward a more interactive iRock, but 
there’s still more to do before the virtual pet rock is going to win 
over any customers... remember our check list? 

o -©reate the iRock HTML webpage?- < — ^ 


o 


Add a JavaScript alert to make the 
greet users when the IRock 
-web-pag^:®4aa4e€Si- 


^ -- 七七 Wis <wc 

-f misKcd) *to。. 


❺ Write JavaScript code to ask for the 
user’s name, print out a personalized 
greeting, and make the rock smile. 


o Add an event handler so that when 

users click on the rock, the code you 
wrote in step 3 runs. 

o Win the admiration and lavish 
gratitude of your boss. 
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the interactive web 


Iwtcractiow is TWO - way communication 

Right now，our rock says hi, but doesn’t let the user do much with it. We 
really want the rock to respond to users. With help from a little JavaScript, 
though, the iRock can be turned into an engaging pet that is surprisingly 
sociable and downright friendly by changing its facial expression and 
greeting the owner by name... 


users c\\ek -tV^c rock, 
•rt should ask -fov 



JavaScript allows the user to interact with the iRock, turning key presses 
and mouse clicks (more events) into pleasantries between a pet and its 
owner. A JavaScript-powered friendship is born! 


r^l^rpen your penci 


Take a guess at writing down the name of the JavaScript event 
used to respond to a mouse click. 
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sharpen solution 


(parpen your pencil 

Solution 


Take a guess at writing down the name of the JavaScript event 
used to respond to a mouse click. 

。灼 didk 


TVic oU\\ek everrt is 

y/^cncvcv user c\\cMs -tVic mouse 

- ov\ av\ element ov\ tVic pay—catV) 
web pay clcmerrUa” V^avc *i*b 


Add a fuwctiow to get the user's name 

Here’s a JavaScript function, all baked up and ready to go. Whenever you see 
Ready Bake JavaScript, that means you should just type the code in, as-is. But 
trust us, you’ll learn everything about this code before long, and be writing 
your own functions. 



R 鄉 9 Baw 

■V 

Java§cR?pt 


This code is for a custom function called touchRock (), which prompts the 
user to enter their name, and then displays a personalized greeting in an alert 
box. The function also changes the rock image to a smiling iRock. It’s all you 
need to add personalization to the iRock. 


function 



touchRock() { 


Just l*»kc alcrto, cvevy WW 
•m JavaS£.r*i\>*t a 丁 
—e is -tou^Rotk. 




pVomp-tO is B -fuh^-tioh -fco pop up d 
box yt a v^luc -fvorn -the usev - . 


var userName = prompt("What is your name?", "Enter your name here."); 


if (userName) { 

alert (’ 'It is good to meet you, " + userName + 
document•getElementByld( n rockImg n )•sre = "rock_happy.png 




the usc\r pC\rsohally... 


name, WC 


V"Otk. 





Can you figure out where this function 
should go in your irock.html page? 
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the interactive web 


□ 


JavaScript Magnets 

The user-friendly iRock code is missing a few key code pieces. 
Can you fill in the missing pieces to make the page whole? 


Hih 七： /Vo 七 su\rc dbou 七 you\r 3hsy/cv*s? 
list out youv* dhswevs by typing 
them ih-fco you\r i\ro 匕 k.html pa^e- 


<html> 

<head> 

<title>iRock - The Virtual Pet Rock</title> 

< type="text/j avascript"> 

function touchRock() { 

var userName = prompt("What is your name? 

if (userName) { 

alert("It is good to meet you, " + userName + "."); 
document • getElementByld ( "rocklmg，'）• src = "rock happy. png"; 



</script 〉 

</head> 

<body 

<div style="margin-top : 1 OOpx; text-align : center ，，> 
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JavaScript Magnets solution 



JavaScript Magnets Solution 

The user-friendly iRock code is missing a few key code pieces. 
Your job was to use the magnets to fill in those missing pieces. 


JavaSdvift *fur^*tior>s dve 
•m a special <stvip*t> -tag *tKa*b 
^ocs m <iicad> o-f fee 



The -type aii\ribuic o( -the 
<s^rip*t> is used "to idc^ti-py 
七 he -type o\ 七 he script language, 
•m 七 his dasc JavaSdvipt 


± 


<html> 

<head> 

<title>>/Rock - The Victual Pet Rock</title> 

ype="text/javascript"> 
touchRock() { 

var userName = prompt("What is your name? 



'Enter your name here.") 


if (userName) { 

alert ("It is good to meet you, ’▼ + userName + ’▼•’▼); 
document•getElementByld (’ ▼rockImg n )•sre = n rock^happy.png 

} 

} The onload cver^i aitv-ibu-tc o-f 

</ script 〉 /^~ 七 k <body> tag v/i\rcs 七 he alc\rt 
</head> \L bo 乂 jv-cctmj -fco 七 he page- 


Charge 七 he v-odk image 

■to a happy v-odk. 


<bod^l 


onload 


alert 


▼ Hello, I am your pet rock . 1 


<div style="margin-top : ]|JUpx; text-align : center n > 


> 


< 


<ima 


onclick 


• png n alt= n iRock" style =l 'cursor : pointer' 


aiv> 


</body> 
</html> 



touchRock() 


/> 



TV^c o^li^k cvcr\*t atbribu 七 e 
o-(* 七 he vod-k C-3uscs 七 

■tou^Ro^kO fwr^tio 的 *to yt 

called *tV^c v-ofi.k is disked. 


mouse duv-sov 
"to d v/hcr> hovc\r*mg 
ovc\r 七 he \rodk. 
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the interactive web 


Instant replay: what just happened? 

A little bit of JavaScript triggered a lot of changes, resulting in a more 
endearing version of the iRock. Let’s view an instant replay of what 
changes were made and how they impact the page. 




.ftoth Th« Anna ； Pr 


O 



°nclick! 




Clitkmj -the iRo^k 
causes cve^-t b> -tv-ijjcv- a 

乙 us*torr» JavaSfirip 七 -Puhdtio^. 


<img icL= 
style: 

/> 




function touchRock() { 

var userName = prompt("What is your name ? M , 

"Enter your name here .，，）； 

if (userName) { 

alert( n It is good to meet you, " + userName +，▼•，▼); 
document•getElementByld( n rockImg n )•sre = "rock happy.png"; 


>v 


The -fuh^tioh asks 
七 he usev- s -fchch 

jv-ccts "them pcv-sohally. 


Whr Js yt>ur n^mp? 


Paul 


1 Cancci ( OK ^ 


The \ro^k image 
*to a 
iRodk- 


k is ejiood to meet you, Paul. 


OK 、 
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iRock rocks! 


Test drive iRock 1.0 

Make sure you’ve made your version of irock. html look like the one 
on page 26, and that you’ve downloaded both rock images from Head 
First Labs {http:/ / www.headjirstlabs.com/books/hfs/). Then, open up your 
web page, and give the rock a spin: 




Dohc/ 

^reate^the iRock HTML we b pag e ■— — > 


❺ 


Add a JavaScript alert to srsake the 
••vcfc page : s Scaded- 


-- ^ 0 *t OY\t 

-f misled) "too. 



Write JavaScript c<ud6 to ask for the 
user’s na me, print out a peisoiiaSized 
greeting, and make the roek smilB. 


wc ^cd -the 


o 

❺ 


T^ccW^^arrewrrHraitdteTrs^thHlrwifCTi 
ttsers dick on tho rock， the code you 
wrote^ 



Wc used *tV^c 

cmdi 乙 k c^cv\i 

Ka^dlcv- for 七 Wis. 


Win the admiration and lavish 
gratitude of your boss. 



Boss man’s happy., 
a v-aisc ar)d a 


widcsfircc 灼 rwohi'tov" 

be -fav behind? 


JavaScript 
allows wet 

pages to DO 
THIVGS :ot 

just play skow 
anct telL 
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the interactive web 



JavaScPiptcposs 

Take some time to sit back and give your right brain 
something to do. It’s your standard crossword; all of 
the solution words are from this chapter. 



Across 

2. The name of a chunk of code that provides the iRock with a 
personalized greeting, 

4. To respond to a mouse click, just set some JavaScript code to 
the.attribute of an HTML element. 

7. Without this, you might as well just stick with HTML and CSS. 

8. To display text to the user, just call the …" function. 


Down 

1. A reusable piece of JavaScript code that performs a common 
task. 

3. Something just happened and the browser is trying to let you 
know. 

5. "The feel good online toy of the season." 

6. Lets you know that a Web page has finished loading. 
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JavaScriptcross solution 



JavaScPiptcposs Solution 
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the interactive web 



Fold the page vertically 
to line up the two brains 


and solve the riddle. 



V 嫩 


Wkat does JavaScript aJJ to wet pages? 


I Vs d mcctmj o-f m’mds, <r 



B 



There are 



Searcliing tke Inter 
net lor tkis answer is an 
action tkat protatly won’t kelp you very 

muck. You skoulct just spenct time witk 
users instead. All wet pages want it. 
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2 storing dfita 


+ Everything Has Its Place + 



In the real world, people often overlook the importance of 
having a place to store all their stuff. Not so in JavaScript. You simply 
don’t have the luxury of walk-in closets and three-car garages. In JavaScript, everything 
has its place, and it’s your job to make sure of it. The issue is data — how to represent it, 
how to store it, and how to find it once you’ve put it somewhere. As a JavaScript storage 
specialist, you’ll be able to take a cluttered room of JavaScript data and impose your will 
on it with a flurry of virtual labels and storage bins. 


this is a new chapter 
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data storing scripts 


Your scripts can store data 


Just about every script has to deal with data in one way or another, and 
that usually means storing data in memory. The JavaScript interpreter that 
lives in web browsers is responsible for setting aside little areas of storage 
for JavaScript data. It’s your job, however, to spell out exactly what the 
data is and how you intend to use it. 



The ih-Pov-rwatioh asso^iaied 
with a house sc«l\r^h musi all 
be s*to\rcd wi-th'm the s^vip-fc 
that pc\r-Po\rms the dakulaiiohs. 


Scripts use stored data to carry out calculations and remember 
information about the user. Without the ability to store data, you’d never 
find that new house or really get to know your iRock. 
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storing data 


Scripts think m data types 


You organize and categorize real world data into types without even 
thinking about it: names, numbers, sounds, and so on. JavaScript also 
categorizes script data into data types. Data types are the key to 
mapping information from your brain to JavaScript. 


JavaScript 



一 - > Turn dishwasher ON 


Take me out to the 
ballgame 


Human Brain 


$19.95 


、— number 


boolean - ^ 

text 





JavaScript uses tkree Lasic data types: 
text, number, and boolean. 



Text data is really just a sequence 
° character s，like the name of your 
favome breakfast cereal. Text is usually 
^ords or sentences, but it doesn ? t 
ave to be . Also known as strings, 
JavaScript text always appears within 
quotes ("") or apostrophes ( ? ? ). 



Number 

Numbers are used to store numeric 
data like the weights and quantities 
of things. JavaScript numbers can 
be either integer/whole numbers (2 
pounds) or decimals (2.5 pounds). 



Boolean data is always in one 
of two possible states — true 
or false. So you can use a 


boolean to represent anything 
that has two possible settings, 
like a toaster with an On/Off 
switch. Booleans show up 
all the time and you can 


use them to help in making 
decisions. We’ll talk more 


about that in Chapter 4 


Data types directly affect how you work with data in JavaScript code. 
For example, alert boxes only display text, not numbers. So numbers are 
converted to text behind the scenes before they’re displayed. 
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sharpen your pencil 



Find everything that could be represented by a JavaScript 
data type, and write down what type that thing should be. 




Cancans Donuh 


1202 


o 
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1204 

































sharpen solution 



Object (more on 
these iw Oh 冲⑽ 91. 
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storing data 
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same versus difference 


Cowstawts stay the SAME, 
variables can CHANGE 

Storing data in JavaScript isn’t just about type, it’s also about purpose. 
What do you want to do with the data? Or more specifically, will the data 
change throughout the course of your script? The answers determine 
whether you code your data type in JavaScript as a variable or a constant. 

A variable changes throughout the course of a script, while a 
constant never changes its value. 


Variable data can 
cliangfe—constant 
data is lixed. 


Constant 

l-3iy\d 0 -(* nrtiHioK) 
rwilcs—a dohS-ta^t 
(unless you wait d\rouhd 
-fov* the 

Ea\rth’s {,tt{x>y\\C plates 
h> shi-p-fc). 



Variable 

Population <Jc ZOO million 
people—a variable s'mdc -the 
U S. pofula*tior> is still OY\ 
the vise. 


2 A V^ouv-s m a day—3 

C^y\s*tay\*t 3 s 3 s 

Wwav>s ave d.oy\tcv-y\cd, 
cvc 灼 -tv^ou^ i\\t ^OOYS 
IS sloY/ly Icavm^ US. 



Su 灼 vise at 厶 : 午 3a^—a 
vaviablc s'mdc the su^irise 
dhahjes cvcvy day. 


URL o( web pajc is 

www.du 的 da 灼 sdo 灼 u*ts.£>om — d 

do^star>*t, unless *thc dor>u*t 
biz. -takes a dvama*tid 
do>wr>*tuv*^. 






yiP^ *total pajc Wits — a 

vdr'idble smte usev-s avc 
乙 cms*ta 灼七 ly tV^c 

pay ar\d Aa—M 七 ^ 
Wi 七 touy\*t- 


What other information types could involve both variables and constants? 
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storing data 



Circle all of the data at Duncan’s Donuts, and then identify each 
thing you circled as being either a variable or a constant. 
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sharpen solution 



Your job was to find all the variables and constants. 




Variable 





^Variable 
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storing data 


Fireside Chats 



Tonight’s talk ： Variable and Constant square off 

over data storage. 


Variable: 

When it comes to storing data, I offer the most in 
flexibility. You can change my value all you want. I 
can be set to one value now and some other value 
later — that’s what I call freedom. 


Sure, but your mule-headed resistance to change 
just won’t work in situations where data has to take 
on different values over time. For example, a rocket 
launch countdown has to change as it counts down 
from 10 to 1. Deal with that! 


Yeah, sure, whatever. How do you get off calling 
variation a bad thing. Don’t you realize that change 
can be a good thing, especially when you’ve got to 
to store information entered by the user, perform 
calculations, anything like that? 


I suppose we’ll just have to agree to disagree. 


Constant: 


And I call that flip-flopping! I say pick a value and 
stick to it. It’s my ruthless consistency that makes 
me so valuable to scripters...they appreciate the 
predictability of data that always stays the course. 


Oh, so you Xhmkyou^re the only data storage option 
for mission critical applications, huh? Wrong! How 
do you think that rocket ever got to the launch pad? 
Because someone was smart enough to make the 
launch date a constant. Show me a deadline that’s a 
variable and I’ll show you a project behind schedule. 


I say the more things change, the more they stay 
the same. And really, why change in the first place? 
Settle on a good value from the start and leave it 
alone. Think about the comfort in knowing that 
a value can never be changed, accidentally or 
otherwise. 


Actually, I’ve disagreed with you all along. 
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building a variable 


Variables start out without a value 


A variable is a storage location in memory with a unique name, like 
a label on a box that’s used to store things. You create a variable using a 
special JavaScript keyword called var, and the name of the new variable. 
A keyword is a word set aside in JavaScript to perform a particular task, 
like creating a variable. 

Ti^c vav- keyv/ovd 
mditatcs youVc 
a ytcv/ vaviablc- 


The vaviablc 
h j us 七 about 
you waht, as as i-t s 
^i<\uc withih your sfivipt. 


TiiC scw\itolor\ 

c 灼 ds *Biis I'mc o-f 

JavaStvip*t 匕 ode. 



When you create a variable using the var keyword, that variable’s 
initially empty.... it has no value. It’s fine for a variable to start off being 
empty as long as you don’t attempt to read its value before assigning 
it a value. It’d be like trying to play a song on your MP3 player before 
loading it with music. 


Vcp ； "this is a 



w/ vav-iablc. 


The Chd c4 - the lihe- 


veady 

-Pov s*tov*a3C. 


TKc variable 

hdvwe is pajcHi*U- 


A newly-created variable has reserved storage space set aside, and is 
ready to store data. And the key to accessing and manipulating the data 
it stores is its name. That’s why it’s so important for the name of every 
variable to be unique AND meaningful. For example, the name 
pageHits gives you a pretty good clue as to what kind of data that 


var pageHits; 


variable stores. Naming the page hit variable x or gerkin wouldn’t 
have been nearly as descriptive. 
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storing data 


Initialize a variable with M 




it 


You don’t have to create variables without an initial value. In fact, it’s 
usually a pretty good idea to give a variable a value when you first create it. 
That’s called initializing a variable. That’s just a matter of adding a tiny 
bit of extra code to the normal variable creation routine: 


Tcv-m'ma*tcs 
I'mc todc- 



Tiic equals s\y\ 匕 orme 乙 

{\\t variable -to 
mi*tidl value- 


This ihi-tial value is 
s*tov*cd ih "the V3\ridbl(. 


Unlike its blank counterpart, an initialized variable is immediately 
ready to be used... it already has a value stored in it. It’s like buying a 
preloaded MP3 player — ready to play right out of the box. 


Assign -the value 
"to "the variable. 


|^ov/ 七 

wbams da*ta- 





The cr>d- 


var 

population 

= 

300; 


Create the vaHable. 





Spc^i-Py its v^lue. 


Remember data types? Another thing this line of script does is assign the 
data type of the variable automatically. In this case, JavaScript creates 
the population variable as a number because you gave it a numeric 
initial value, 300. If the variable is ever assigned some other type, then 
the type of the variable changes to reflect the new data. Most of the time 
JavaScript handles this automatically; there will be cases where you will 
need to be explicit and even convert to a different data type...but we’ll get 
to all that a bit later. 
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constants are stubborn 

Cowstawts arc rcsistawt to change 

Initializing a variable is all about setting its first value — there’s nothing 
stopping that value from being changed later. To store a piece of data 
that can never change, you need a constant. Constants are created just like 
initialized variables, but you use the const keyword instead of var. And 
the “initial” value becomes a permanent value...constants play for keeps! 


TVis tv-ca*tcs a tcmstavrt 

-bV^a-t be 


l\si\Ojr\ a value -to 



Not all 
browsers 
support 
the const 
keyword. 


The const keyword is 
fairly new to JavaScript, 
and not all browsers 
support it. Be sure 
to double check your 
target browsers before 
releasing JavaScript 
code that uses const. 




The o-p 

"the ^OhS-t^ht 



The value—this 

value 


I 七 ’s all ovcv. 


The biggest difference between creating a constant and a variable is you 
have to use the const keyword instead of var. The syntax is the same as 
when you’re initializing a variable. But, constants are often named using 
all capital letters to make them STANDOUT from variables in your code. 



Constants are handy for storing information that you might directly code in 
a script, like a sales tax rate. Instead of using number like 0.925, your code 
is much easier to understand if you use a constant with a descriptive name, 
like TAXRATE. And if you ever need to change the value of the constant 
in the script, you can make the change in one place — where the constant is 
defined — instead of trying to find each time it appears in your script, which 


TVis data Will ⑽ w, 
cvcv- 乩 … cvcW 


const TAXRATE 


. 925 


TKc value 

y/'lll Kave *t^V-OU^OU*t 

all e 七 evVi 切 . 


This d^ia 


"Hie ALL CAPS dohS-tah-t harwc helps -fco 
你 ake it easily idchti-Piablc as 
■to variables, whidh use r^ixcdCasc. 


could get really complicated. 
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storing data 


Hang on, I thought constants 
couldn’t change. 


O 


Constants can’t change，at least 
not without a text editor. 

It’s true that constants can’t change while a script is 
running... but there’s nothing stoppingj ⑽ from changing 
the value of a constant where it’s first created. So from your 
script’s perspective, a constant is absolutely fixed, but from 
your perspective, it can be changed by going back to the point 
where you created the constant. So a tax rate constant can’t 
change while the script is running, but you can change the 
rate in your initialization code, and the new constant value 
will be reflected in the script from then on out. 




E%eftci$e 


Decide whether each of the following pieces of information should be a variable or a constant, 
and then write the code to create each, and initialize them (if that’s appropriate). 



The current temperature, which is initially unknown 

The conversion unit from human years to dog years (1 human year = 7 dog years) 
The countdown for a rocket launch (from 10 to 0) 

The price of a tasty donut (50 cents) 
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exercise solution 



E^eRciSe 

§oLytiOrt 


Your job was to decide whether each of the following pieces of information should be a variable 
or a constant, and then write the code to create them, and initialize them when appropriate. 






The current temperature, which is initially unknown 


The conversion unit from human years to dog years (1 human year = 7 dog years) 


The countdown for a rocket launch (from 10 to 0) 


The price of a tasty donut (50 cents) 


vav- -temp; 


V 

T\\t -tcmpcv-aWc all 

- time ^Y\d value IS \AYkv\O^Y\, so 


a bUnk variable is *tV^c ticket 

to^i mmhiTovo^ - 1\ 


丁 his dohVC\rsioh \ratc doesh^t 


--- so it i^akcs pev-fedt se^se 


as a dohS-tah-fc. 

va\r 匕 ou 灼 "tdovm = 

- 10; 

个 

The co\AY\iAo^iv\ V^as -to -fv-om 

v 

10 bo 1, so \{!s a variable, a^d i*b 

V. 

— ^ V^as *to be *t° *tV)C s*t3\rt 


dour\*t (10). 

vav- do^u*tPv"idc : 

-0.^0; ov to^si DONUTPRICE - 0 ^0] 


W ihe dohut p\ri 匕 e dhahges, i-t 

sewe as a vaHable thats 
*to the pvidc. 



...ov- maybe domi » s 

y/Wi£-V^ 3 toir\S"b3ir\"t 

set -to ^ks better. 
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Q/ If ! don’t specify the data type of 
JavaScript data, how does it ever know 
what the type is? 

Unlike some programming languages, 
JavaScript doesn’t allow you to explicitly set 
the type of a constant or variable. Instead, 
the type is implied when you set the value 
of the data. This allows JavaScript variables 
a lot of flexibility since their data types can 
change when different values are assigned 
to them. For example: if you assign the 
number 17 to a variable named x, the 
variable is a number. But if you turn around 
and assign x the text “seventeen”，the 
variable type changes to string. 

If the data type of JavaScript data 
is taken care of automatically, why should 
I even care about data types? 

Because there are plenty of situations 
where you can’t rely solely on JavaScript's 
automatic data type handling. For example, 
you may have a number stored as text that 
you want to use in a calculation. You have 
to convert the text type to the number type 
in order to do any math calculations with the 
number. The reverse is true when displaying 
a number in an alert box—it must first be 
converted to text. JavaScript will perform the 
number-to-text conversion automatically, but 
it may not convert exactly like you want it to. 



Is it OK to leave a variable 
uninitialized if I don’t know what it’s value 
is up front? 

Absolutely. The idea behind 
initialization is to try to head off problems 
where you might try to access a variable 
when it doesn't have a value. But, there are 
also times where there’s no way to know 
the value of a variable when you first create 
it. If that happens, just make sure that the 
variable gets set before you try to use it. And 
keep in mind that you can always initialize 
a variable to a “nothing” value, such as n " 
for text, 0 for numbers, or false for 
booleans. This helps eliminate the risk of 
accidentally accessing uninitialized data. 


Is there any trick to knowing when 
to use a variable and when to use a 
constant? 


While it's easy to just say constants 
can’t change and variables can, there’s a 
bit more to it than that. In many cases you'll 


start out using variables for everything, and 
only realize that there are opportunities to 
make some of those variables into constants 
later. Even then, it's rare that you'll be able 
to turn a variable into a constant. More 
likely, you’ll have a fixed piece of text or 
number that is used in several places, like 
a repetitive greeting or conversion rate. 


Instead of duplicating the text or number 
over and over, create a constant for it and 
use that instead. Then if you ever need to 
adjust or change the value, you can do it in 
one place in your code. 

What happens to script data when 
a web page is reloaded? 

Script data gets reset to its initial 
values, as if the script had never been run 
before. In other words, refreshing a web 
page has the same effect on the script as if 
the script was being run for the first time. 


Data 

types are 

estatliskect 

wken 

variable’s and 
constant’s 
values are set 


BULLET POINTS - 

■ Script data can usually be represented by one of the 
three basic data types: text, number, or boolean. 

■ A variable is a piece of data that can change over the 
course of a script. 

■ A constant is a piece of information that cannot change. 


■ The var keyword is used to create variables, while 
const is used to create constants. 

■ The data type of a piece of JavaScript data is 
established when you set the data to a certain value, 
and for variables the type can change. 
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my name is 


Whafs iw a wamc? 


Variables, constants, and other JavaScript syntax constructs are identified 
in scripts using unique names known as identifiers. JavaScript identifiers 
are like the names of people in the real world, except they aren’t as 
flexible (people can have the same name, but JavaScript variables can’t). 

In addition to being unique within a script, identifiers must abide by a few 
naming laws laid down by JavaScript: 


An identifier must be at least one character in length. 


The first character in an identifier must be a letter, an 
underscore (」，or a dollar sign ($)_ 




Each character after the first character can be a letter, 
an underscore (」，a dollar sign ($)，or a number. 


Spaces and special characters other than _ and $ are 
not allowed in any part of an identifier. 


When you create a JavaScript identifier for a variable or constant, you’re 
naming a piece of information that typically has meaning within a script. 

So, it’s not enough to simply abide by the laws of identifier naming. You 
should definitely try to add context to the names of your data pieces so 
that they are immediately identifiable. 

Of course, there are times when a simple x does the job — not every piece 
of data in a script has a purpose that is easily described. 

SliCV'i-f-f O S- Justice 

Identifiers skoulct te descriptive 
so tkat ctata is easily ictentiliatle, 



o 


o 



not to mention legal •“ 
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Legal and illegal variable and cowstawt names 


storing data 





Legal- Icttcv-s 
3hd Uhdcv-sdovcs 
3 v*c dll good. 


topSecret 


wi^th Bv\ 

UK>dc\rsdo\rc isr^^t a pv-oblcrw ai 
all—some people cvcr» use -this 
"tcdhhi^uc {jo Y\^m\c variables 
■thai have a sp 比 ial me 扣 mg. 


$total 


Lejab al*tho— • 七 1°°^ 
a little strafe, start ’， 
W\i\\ a dollar s 吵 is 
pcv--fc^*tly Icjal- 


topi00 


Legal ： ^umbevs do^*t 
apfcav- a*t *tKc beynrm’m^ 

so *t^is is ^ [ 一 OK. 


Ko*t Ic^ab 心七 
s*tav •七 Vrth a special 
tKav-at-tev- oi\\tr 
-tKav\ _ ov- f. 


The pastry wizards over at Duncan’s Donuts are trying to decide on a promotional cap design. 
Unfortunately, they don’t realize that some of the designs violate JavaScript’s rules for naming 
identifiers. Mark an X over the names on the caps that won’t cut it in JavaScript. 


firstName 


ka chow 


Noi legal ： s-bv-t 
with a humbev-. 


Le^ah all Irt-tcv-s, so 
cvcv-ythihj is -Pmc- 


cWts'. 


、 tasty 


hot no^ 


^lazel 
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exercise solution 



Your job was to mark an X over the caps that have variable names that won’t cut it in JavaScript. 



dlloy/ed 扣 yv/hcirc 

m an iderrti^fiev". 




The pou^d symbol is ohly 
9°^9 "to invoke the wv-ath 
o( Shc\ri-ff Justice. 


Variable names often use CamelCase 


Although there aren’t any JavaScript laws governing how you style 
identifier names, the JavaScript community has some unofficial 
standards. One of these standards is using CamelCase, which means 
mixing case within identifiers that consist of more than one word 
(remember, you can’t have spaces in a variable name). Variables usually 
use lower camel case, in which the first word is all lowercase, but 
additional words are mixed-case. 

The -Piv-s-t Iciicv- 
o-f v/ov*d is 


num cake 一 donuts 


Scpav-atmj rwul-tiplc wov-ds 
with dh uhdcv*sdov*c m B 
variable ide^ii-fiev- isjr /七 illegal ； 
bu 七 thcv-c^s a bciicv- way. 



匕 ap’rtaliz^d. 



NumCakeDonuts 


oir t^cM ytord 
\s 


lowerCamelCase is used to 
name multiWorct variatles* 


dtiitr... *tKis s-tylc is ky\oym 
as bu 七 rt s*bll is / 七 

c^u'i*tc vi^K-t -fov vav-iablcs. 






ihc\rc ii is—lov/cv- ddmel 
匕 dse is pc\r-Pc^*t -fov 
variables w’rth rwul-tiplc wovds. 
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JavaScript Magnets 


The identifier magnets have gotten separated from the variables 
and constants they identify at Duncan’s Donuts. Match up the 
correct magnet to each variable/constant, and make sure you avoid 
magnets with illegal names. Bonus points: identify each data type. 


sold Way 


_ 




-flour i\\ai ^ocs 

\y\bo a single 

Jc doy\u-bs 


ho l d ^ u ^ osi 


TV^c status 
七 V>c alav^ 


The busihess 

^ be\r used io 
sales 
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JavaScript magnets solution 


p 


JavaScript Magnets Solution 

The identifier magnets have gotten separated from the variables 
and constants they identify at Duncan’s Donuts. Match up the 
correct magnet to each variable/constant, and make sure you avoid 
magnets with illegal names. Bonus points: identify each data type. 




sold Wa 7 


numCups 




"the Cmplowe^ 

employeeOfMonth 


丁 ^ ^to>rd 

ho ' d ^ U ^ osi 

i h 

eclairRecord 


TV^c status of 
七 V>e alarm system 


alarmstatus 


TKc amount 
-flouv 七 V>a 七 ^ocs 

\y\bo a single 

flour perbatch 

The busihess -tax 

used io 
^ sales is% 

taxnum 


A^urhb 


Kumbcv- 


Boolean 


All these Ic-f-tovcvs 
av-c 'illegal i^a^cs m 
JavaScript. 





54 Chapter 2 
















































storing data 


The next big thing (m donuts) 

You may know about Duncan’s Donuts, but you haven’t met Duncan 
or heard about his big plan to shake up the donut market. Duncan 
wants to take the “Hot Donuts” business to the next level...he wants to 
put it online! His idea is just-in-time donuts, where you place an 
order online and enter a specific pick-up time, and have a hot order 
of donuts waiting for you at the precise pick-up time. Your job is 
to make sure the user enters the required data，as well as 
calculate the tax and order total. 





DB3000 


The Dohut 
Blas-tcv -1000 


tto-t ahd 

Oh -tirnc/ 


oanuia- 

Junrcan 11 * JustlnLfl Donut* 




Marro: 

_ dam/ts: 0 

# <ir tforstia - 33 1 

咖你 II pc^P: J 5* 


卜 S 仆 中七 ^ap-tu^cs 

the uscir ihput ahd 

^l^ula-tcs -the -bx 
-to-tal. 




Tei: 


-trill 5 * S 3 


RK< O-der 


Hey, Im Duncan. This online 
ordering system for making 
hot donuts is going to ROCK! 




i W T S 

f 




A- 
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JavaScript donut forms 


?\m the Pimcan’s Powuts web page 

Processing a just-in-time donut order involves both checking (or validating) 
the order form for required data, and calculating the order total based 
upon that data. The subtotal and total are calculated on the fly as the 
data is entered so that the user gets immediate feedback on the total 
price. The Place Order button is for submitting the final order, which isn’t 
really a Java Script issue", we’re not worrying about that here. 



This ih-fov-rwatioh is \rc^uiv-cd -fov 
"the o\rdc\r, so i-t should be 
validoi-tcd by JavaS^v-ipt. 


e o o 


Donuts 


o 


Duncan's Just-In-Time Donuts 

A H donuts 50 cents each, cake or glaze ^ 



Name: Paul 


# of cake donuts: jo 
# o! glazed donuts: [l2 

^Minutes lit jc 卿士 s 

^btotaiTjsS.OO 



place Order 




Done 


This 灼 is 

^dlduld'ted ov\ -the -Ply 
usmj JavaS^vipt 




JavaSdvift is^*t vc^uiv-cd (oy 

-the -fov-m submission *to 
>wcb sewev-. 
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storing data 




The subtotal is calculated by multiplying the total number of donuts 
by the price per donut: 



(# of cake donuts 

+ 

# of glazed donuts 

)x 

price per donut 




The tax is calculated by multiplying the subtotal by the tax rate: 

subtotal x tax rate 





The order total is calculated by adding the subtotal and the tax: 

subtotal + tax 


It looks like Duncan has a fair amount of data to keep track of in his form. 
Not only does he have to keep up with the various pieces of information 
entered by the user, but there are also several pieces of data that get 
calculated in JavaScript code. 



What variables and constants will you 
need to carry out these calculations? 
What would you name them? 
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does not compute 


A first take at the donut calculations 


Duncan tried to write the JavaScript for the calculations himself, but 
ran into problems. As soon as a user enters a number of donuts, the 
on-the-fly calculations immediately go haywire. They’re coming up with 
values of $NaN, which doesn’t make much sense. Even worse, orders 
aren’t getting filled and customers aren’t exactly thrilled with Duncan’s 
technological “advancements.” 



It’s time to take a look at the code for the donut script 
and see exactly what’s going on. Look over on the next 
page (or at the code samples you can download from 
http:/ / www.headfirstlabs.com/books/hfjs/), and see if you 
can figure out what happened. 


ho-t good^ 

xO 


3ubtolal'. |SN^M 
Tax: [sNaN 


fKaK) > s c.odc -fov 
-tcv-v-'iklY 
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storing data 


TWis codt »s tailed *to 
update order 
taltula*tm5 *tV^c sub-to*tal 
-total tV^c -fly- 


Sih 々 the dais sieved 
by the useir looks - 

"tlwe must be somethihg 
with the dohsia^ts. 


丁 \Vis dodic subw'"t*bs 七 V^c 
ovdev- -to *tV>c server 

dy\d do^-f'ivws 七 he 
ovdev v/»*tK 七 he usev. 


<html> 

<head> 

<title>Duncan's Just-In-Time Donuts</title> 

〈link rel= M stylesheet M type= M text/css M href= M donuts.css M /> 

^script type= n text/javascript ，，〉 

^ function updateOrder() { 
const TAXRATE; 
const DONUTPRICE; 

var numCakeDonuts = document.getElementByld("cakedonuts-).value; 
var numGlazedDonuts = document.getElementByld( M glazeddonuts M ) .vllue; 
var subTotal (numCakeDonuts + numGlazedDonuts) * DONUTPRICE - 
var tax = subTotal * TAXRATE/ 
var total = subTotal + tax; 

jocument.getElementByldrsubtQtal”）.value = ” $ ” + subTotal. toFixed ( 2 ) - 
document.getElementByld( M tax M ).value = M $ M + tax.toFixed( 2 ) - 
} d °cument.getElementByldrtotal-).value = + total.toFixed( 2 ); 

function placeOrder() { 

// Submit order to server.•. 
form.submit(); 

</script> 

</head> 

<body> 

<div id= M frame"> 


TKc order »s updated 
CI*tV^CV- humkev- o\ 
dor\u*b ^av\ys. 


The o\rdc\r is submitted 
whch the ?\au OyAcy 
bu-fc-fcoh is disked. 


〈form name= M orderform" action= M donuts.php M method: 


POST，，> 


<div class = ，， field，，> 

# of cake donuts:typG =M text M id 
value= M M onchange= M updateOrder(); M /> 

</div> 

<div class = ，， field，，> 

# of glazed donuts: 〈input t y pe=”text” id=-glazeddonuts 
name= M glazeddonuts M value= MM onchange= M updateOrder() - 

<div class= M field M > 

〈input type= M button M value= M Place Order 
onclick= M placeOrder (this .form); M /> 

</div> 

</form> 

</div> 

</body> 

</html> 


cakedonuts” namesHcakedonuts 1 


/> 


(^|j^rpen your pencil 


Write down what you think went wrong with Duncan's just-in- 
time donut script code. 
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sharpen solution 


^harpen your pencil 

Sobtion 


Write down what you think went wrong with Duncan's just-in- 
time donut script code. 


The "two .^.4. Y^r). 今 mca^s 

*thc dakula*tio^s depend -them da^*t be Completed. 




Chapter 2 


OK, I understand that a constant always 
has the same value, but if thafs the case 
then how can it be uninitialized? 


You shouldn’t ever uninitialize a constant. 

You can uninitialize a constant by never giving it a value, 
but it’s a very bad idea. When you don’t initialize a 
constant when you create it, that constant ends up in no 
man’s land — it has no value, and even worse, it can’t 
be given one. An uninitialized constant is essentially a 
coding error, even though browsers don’t usually let 
you know about it. 














storing data 


Initialize your data...or else 

When you don’t initialize a piece of data, it’s considered undefined, 
which is a fancy way of saying it has no value. That doesn’t mean it 
isn’t worth anything, it just means it doesn’t contain any information... 
yet. The problem shows up when you try to use variables or constants 
that haven’t been initialized. 


const DONUTPRICE 
var 


Uhihitialiicd 

J 




1 ^ 山 vaSdirip 七 you 
multiply hunrtbcv^s 
us,h 9 ^ ihs-tcad o-p x 




TVis is a 
bi^ problem. 


The DONUTPRICE constant is uninitialized ， which means it has no 
value. Actually JavaScript has a special value just for this “non-value” 
state: undefined. It’s sort of like how your phone’s voice mail will 
report “no messages” when you don’t have any messages — “no messages” 
is technically still a message but it’s purpose is to represent the lack of 
messages. Same deal with undefined — it indicates a lack of data. 


A piece ol data 
is unctelinect 




wken it kas 
no value. 

"o dais 
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NaN not naan 


NaN is NOT a number 


Just as undefined represents a special data condition, there’s another 
important value used to indicate a special case with JavaScript variables: 
NaN. NaN means Not a Number, and it’s what the subTotal variable 
gets set to since there isn’t enough information to carry out the calculation. 
In other words, you treated a missing value as a number... and got NaN. 




subtotal = (0 + 12) * ? = NaN 




iWis data is He 

c.altula*bior\ be dawed out 


So solving the NaN problem requires initializing the DONUT PRICE 
constant when you create it: 

const DONUTPRICE = 0.50; 


VaV is a value 
tkat isn’t a 
numher even 
tkougfli you’re 
expecting ； tke 
value to te one* 


tWei^ire no o 

Dumb Questions 


What does it mean that identifiers 
must be unique within a script? 

The whole point of identifiers is to 
serve as a unique name that you can use to 
identify a piece of information in a script. In 
the real world, it isn't all that uncommon for 
people to have the same name... but then 
again, people have the ability to deal with 
such “name clashes” and figure out who 
is who. JavaScript isn’t equipped to deal 
with ambiguity, so it needs you to carefully 
distinguish different pieces of information by 
using different names. You do this by making 
sure identifiers within your script code are 
all unique. 

Does every identifier I create have 
to be unique, or unique only in a specific 
script? 


Identifier uniqueness is really only 
important within a single script, and in 
some cases only within certain portions of 
a single script. However, keep in mind that 
scripts for big web applications can get quite 
large, spread across lots of files. In this 
case, it becomes more challenging to ensure 
uniqueness among all identifiers. The good 
news it that it isn’t terribly difficult to maintain 
identifier uniqueness in scripts of your own, 
provided you're as descriptive as possible 
when naming them. 

I still don’t quite understand when 
to use camel case and lower camel case. 
What gives? 

Camel case (with the first word 
capitalized) only applies to naming 
JavaScript objects, which well talk about 
in Chapter 9. Lower camel case applies to 
variables and functions, and is the same 


as camel case, except the first letter in 
the identifier is lowercase. So camel case 
means you would name an object Donut, 
while lower camel case means you would 
name a function getDonut () and a 
variable numDonuts. There isn’t a cute 
name for constants—they're just all caps. 

Are text and boolean data 
considered NaN? 

Theoretically, yes, since they definitely 
aren’t numbers. But in reality, no. The 
purpose of NaN is to indicate that a 
number isn’t what you think it is. In other 
words, NaN isn’t so much a description of 
JavaScript data in general as it is an error 
indicator for number data types. You typically 
only encounter NaN when performing 
calculations that expect numbers but for 
some reason are given non-numeric data to 
work with. 
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Meanwhile back at PimcaH’s 


Back at Duncan’s Donuts, things have gone from bad to worse. 
Instead of empty boxes, now there are donuts everywhere — every 
order is somehow getting overcalculated. Duncan is getting 
overwhelmed with complaints of donut overload and pastry gouging. 




What could be wrong with how the donut quantity data is being handled? 




corvee 


oonuTS 


f>0|4LFT^ 




Q OFFER 




嗜 ％4 

COFFEE 


OONLFT 签 


POFFIEC 




COFFEE 




-rmm 


COFFEE 


◎ ONUT 在 


TV^c tusWcv* o^ly ovdcrcd 
^ donuts W 七 he somcV^oy/ 
wded uf ybtmj a lot 


Duncan^ Just-lri^me Oonyts 

Duncan's Just-In-Time Donuts 

Mama: rrc^" 

# of nflkK dnnuibi： 

拓。 f giaaetf danuts ： 

Minutss 'ill p^up ： 


I don’t get it. Ive 
gone from too few 
donuts to too many. 


Place Order 
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different types of addition 


You can add more thaw numbers 

In JavaScript, context is everything. Specifically, it matters what 
kind of data you’re manipulating in a given piece of code, not 
just what you’re doing with the data. Even something as simple 
as adding two pieces of information can yield very different 
results depending upon the type of data involved. 


1 + 2 = 3 


Numeric Addition 

Adding two numbers does what 
you might expect — it produces a 
result that is the mathematical 
addition of the two values. 


"do" + "nuts" = "donuts" 


String Concatenation 


乙 y wo\rd 

^ these 


Adding two strings also does 
what you might expect but it’s 
very different than mathematical 
addition here the strings are 
attached end-to-end. 


Knowing that strings of text are added differently than 
numbers, what do you think happens when an attempt is 
made to add two textual numbers? 

”1” + ”2” = ? ^ - y/Kat 5Wcs? 


JavaScript doesn’t really care what’s in a string of text — it’s 
all characters to JavaScript. So the fact that the strings hold 
numeric characters makes no difference... string concatenation 
is still performed, resulting in an unexpected result if the 
intent was numeric addition. 



-these a\rc s-tv-mjs a^d 
y^oi K>umbc\rs, -they avc w addcd ,； 


TKc vcsul*t is a 
七 ha 七 does〆 七 look like 
matiierwa 七 idal addi 七 a 七 all. 



Always make 
sure you’re 
adding what 
you think 
you’re adding 

Accidentally concatenating 
strings when you intend to 


add numbers is a common 


■ 


JavaScript mistake. Be sure 
to convert strings to numbers 
before adding them if your 
intent is numeric addition. 
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parselntO and parscFloatO: converts 
text to a number 


Despite the addition/concatenation problem, there are legitimate 
situations where you need to perform a mathematical operation 
on a number that you’ve got stored as a string. In these cases, you 
need to convert the string to a number before performing any 
numeric operations on it. JavaScript provides two handy functions 
for carrying out this type of conversion: 


Give this function a string and it Give this function a string and it converts the 

converts the string to an integer string to a floating point (decimal) number 


Each of these built-in functions accepts a string and returns 
a number after carrying out the conversion: 


pavsc|v>*tO *tuvr^s U | W m*to I 



I 


pai^selnt ( M l fl ) 


Z 

+ parselnt( n 2 n ) =3 

s-tv-ihg Z is ^ohvcv-tcd 
"the humbev* Z. 



Tiiis tiw'C v-csul*t 
is 七 你匕 al 
addition o( I 2-* 


o 


Keep in mind that the parselnt () and parseFloat () 
functions aren’t guaranteed to always work. They’re 
only as good as the information you provide them. They’ll 
do their best at converting strings to numbers, but the idea 
is that you should be providing them with strings that only 
contain numeric characters. 


parseFloat ( n $31.50 ’’) 

/ 

TVis code is a fv-oblcm 

because f 


=NaN 

Swphsc, suv-pv-isc, the 
result is Hoi a 


Don’t worry if 
this function 
stuff is still a 
little confusing. 

You’ll get the formal lowdown on 
functions a little later — for now 
all you really need to know is that 
functions allow you pass them 
information and then give you back 
something in return. 
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when things don’t add up 


Why are extra donuts being ordered? 

Take a closer look at the just-in-time donut order form. We 
should be able to figure out why so many donuts are being 
accidentally ordered... 





Duncan's Just-In-Time Donuts 

AH donuts 50 cents each, cake or glazed! 

Name: |Greg 
# of cake donuts: 

# of glazed donuts: 



Minutes pickup: |20 
Subl 

beiha 

-fo\r avc f - 

^lly bci hg ovd^ed... Totaf： P AA1 


We can divide the subtotal by the price for each 
donut...and the answer is how many donuts are 
getting ordered. 


"The ovdev" sub*to*t^|. 



$31.50 / $0.50 = 63 donuts 

TViC \>CV- demut. 


The ioisl humbc\r O-P dohuis 

a ^ tual| y oYdtYtd... u 咖. 


This looks a whole lot like the numeric string addition problem, especially 



when you consider that form data is always stored as strings regardless of 
what it is. Even though numbers are entered into the form fields, from a 
JavaScript perspective, they’re really just text. So we just need to convert 
the strings to actual numbers to prevent a numeric addition from being 
misinterpreted as a string concatenation. 


R ⑽士 w l W 二:忉’？ Looks 

kmd like doesh *t »*t? 
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storing data 


your penci 



Using the pieces of code below to grab the contents of the donut 
quantity form fields, write the missing lines of code in Duncan’s 
updateOrder () function so that the donut quantities are 
converted from strings to numbers. 


document.getElementByld("cakedonuts").value 

TKis dode yis 七 lie r^umbcv 
^ake dor>u*b cir>*tcv-cd by 
uscv* m dor>u*t -fovm. 


丁卜 todt gvabs the 

9^^ dohuts chtcvcd 
"to -the dohu-t -fov-m. X 


document.getElementByld( M glazeddonuts M ).value 


function updateOrder() { 

const TAXRATE = 0.0925; 
const DONUTPRICE = 0.50 
var numCakeDonuts = 


var numGlazedDonuts 


if (isNaN(numCakeDonuts)) 
numCakeDonuts = 0; 
if (isNaN(numGlazedDonuts)) 
numGlazedDonuts = 0; 

var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE; 
var tax = subTotal * TAXRATE; 
var total = subTotal + tax; 

document .getElementById( n subtotal n ) .value = ▼，$▼， + subTotal • toFixed (2); 
document .getElementByld ( n tax n ) .value = ▼，$▼， + tax. toFixed (2); 
document .getElementByld ( n total n ) .value =，，$▼， + total • toFixed (2); 
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sharpen solution 


(^Jterpen your pencil 

Solution 


Using the pieces of code below to grab the contents of the donut 
quantity form fields, write the missing lines of code in Duncan’s 
updateOrder () function so that the donut quantities are 
converted from strings to numbers. 


document.getElementByld("cakedonuts").value 


' document.getElementByld( M glazeddonuts M ).value 

Smtc both ave 

favselrrtO is 
used (or the dor>vcv*sioi^. 

function updateOrder() { 

const TAXRATE = 0.0925; 
const DONUTPRICE =0.50 
var numCakeDonuts = 

pav-scIhtfdodumchty-tElcmch-tByldr^akcdohu-b^O.valuc); 

var numGlazedDonuts = 

parsclh 七 (dodumch 七 'ytElcmch 七 Byld(»a«(Wohuis”).valuc); 

if (isNaN(numCakeDonuts)) 
numCakeDonuts = 0 ; 
if (isNaN(numGlazedDonuts)) 
numGlazedDonuts = 0; 

var subTotal = (numCakeDonuts + numGlazedDonuts) * DONUTPRICE; 
var tax = subTotal * TAXRATE; 
var total = subTotal + tax; 

document .getElementById( n subtotal n ) .value = ▼，$，， + subTotal. toFixed (2) 
document • getElementByld ( n tax n ) .value = ▼，$▼， + tax. toFixed (2); 
document .getElementByld「total'，）.value =，，$▼， + total. toFixed (2); 


t 


he 七 vouy>ds 

dollar values b> *tv/o dcdimal flakes. 
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storing data 


BULLET POINTS - 

■ Although not a strict JavaScript requirement, it’s a 
good coding convention to name constants in ALL 
UPPERCASE and variables in lowerCamelCase. 

■ Always initialize constants when you create them, and 
initialize variables whenever possible. 

■ When a variable isn’t initialized, it remains undefined 
until a value is eventually assigned to it. 


NaN stands for Not a Number, and is used to 
indicate that a piece of data is not a number when the 
expectation is that it should be. 

String concatenation is very different from mathematical 
addition, even though both use the familiar plus sign (+)■ 

The built-in parselnt () and parseFloat () 

functions are used to convert strings to numbers. 


You figured out the problem... 

Duncan is thrilled with the JavaScript code fixes you made. He’s finally 



Of course, it’s risky to assume that a few quick fixes here and there 
will solve your problems for all eternity. In fact, sometimes the peskiest 
problems are exposed by unexpected outside forces... 
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the dfoh thickens 


Vamm discovers donut espionage 


Duncan’s got a new problem: a weasel competitor named Frankie. 
Frankie runs the hotdog business across the street from Duncan, and is 
now offering a Breakfast Hound. Problem is, Frankie’s playing dirty and 
submitting bogus donut orders with no names. So now we have orders 
with no customers — and that’s not good. 



Duncan is wasting precious time, energy, and donuts filling bogus orders., 
and he needs you to make sure all the form data has been entered before 
allowing an order to go through. 
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storing data 


Use getElementPyldO to grab form data 

In order to check the validity of form data, you need a way to grab the 
data from your Web page. The key to to accessing a web page element 
with JavaScript is the id attribute of the HTML tag: 


<input type= n text n id= n cakedonuts M name= n cakedonuts n / > 


TV id attiribu-tc is what 
you use -to autss -the -Po^i 
•field ih dodc. 


TKc takt dov>u*t <\ua 
HTML mfu*t element 



JavaScript allows you to retrieve a web page element with its ID using a 
function called getElementByld () . This function doesn’t grab an -t-,... 

element’s data directly, but instead provides you with the HTML field ^ yld ) is a 

itself, as a JavaScript object. You then access the data through the field’s ^ 0 〜你伙七 object, 3hd 

value property. 


o 


document.getElementByld() 

ot an 

element on a web page and it gives 
you back the element itself, which 
can then be used to access web data 

TV 

^ti\\od -to 

{\\c dod.uwcy\-t object 



Don’t sweat objects, properties, 

* 1 and methods right now. 

JavaScript supports an advanced data 
type called an object that allows you to 
do some really cool things. In fact, the JavaScript language 
itself is really just a bunch of objects. We’ll talk a lot more 
about objects later in the book — for now, just know that a 
method is a lot like a function, and a property is a lot like a 
variable. 



document.getElementByld( M cakedonuts n ).value 

The value pv-opc\rty gives 
you atuss io -the data. ■ 



Tiic IP »s 

key bo a^css'm^ 
an element 


With this code in hand, you’re now ready to check Duncan’s form data to 
make sure the fields aren’t empty before accepting an order. 
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did you fill everything out? 


Validate the web form's data 


You need to check to make sure a name is entered into the donut form. 

Not entering the number of minutes until pick-up could also be a problem, 
since the whole point is to provide hot donuts just in time. So, best case, 
you want to ensure both pieces of data are filled-in and valid. 

Checking for empty data in a form field is a matter of checking to see if 
the form field value is an empty string ('▼ ’▼). 


Name; 



Pcmu 七 ov-dev- 


七 7 



document.getElementByld("name").value 



to be halted and the user should get asked to enter their name. The same 
thing goes for the minutes field, except it’s also helpful to go a step further 
and look to see if the data in that field is a number. The built-in isNaN () 
function is what makes this check possible — you pass it a value and it tells 
you whether the value is not a number (true) or if it is a number (false: 


Bad data—its 
°"t actually a hurwbev-. 



n ft 



l-P the value 

is 

s-tv-ihg, we have 
3 pv-oblcrw. 


An empty string is 
a clue tkat a lorm 
lield kas no data* 


isNaN(document.getElementByld( n pickupminutes n ).value) 


ish/a^O ^hedks 
"to see i-P a value 
is S hur^bev*. 



W the value is tv-uc, the daia 
is hot a hurwbev-, so the order 

t be pvo^csscd. 


true 
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storing data 



JavaScript Magnets 


The placeOrder () function is where the name and pick-up minutes 
data validation takes place. Use the magnets to finish writing the code 
that checks for the existence of name and pick-up minutes data, along 
with making sure that the pick-up minutes entered is a number. You’ll 
need to use each magnet, and some magnets more than once. 


,s used "to test -fov- a 
^ohditioh dhd thch -take 
adtioh addo\rdihgly—i-p -this, 
thch do sornctliihg. 


TW，S »S a 於 C'ualvb7 

七 CS 七一 * s OM 七 — 
to a^otV^cv- tw»y^5? 


TK*IS or>C o( *bwo 

匕 ohdrbiohS cav\ v-csul*t *tKc 

ad*tior\ 一 i-f *tKis OR 七 V > 此 

*tKcir> do somC*tKm^- 


fur 


ction placeOrder() 


alert("I'm 'sorry but you must provide your 


name 


. . fl . 

before submitting an order.) 


I I 


else if 


...■' _ 和 "h。nnmbpr of minutes until pick-up' 

alert ("I'm sorry but you must provide the number or mx 

n before submitting an order.’ ）； 

else 

// Submit the order to the server 
form.submit(); 
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JavaScript magnets solution 



JavaScript Magnets Solution 


The placeOrder () function is where the name and pick-up 
minutes data validation takes place. Use the magnets to finish writing 
the code that checks for the existence of name and pick-up minutes 
data, along with making sure that the pick-up minutes entered is a 
number. All of the magnets are used, and some are used several times. 
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storing data 


You saved Pimcan’s Powuts... again! 

The new and improved just-in-time donut form with data validation has 
put an end to Frankie’s pastry espionage, and also made the page more 
robust for real customers. Using JavaScript to protect the integrity of data 
entered by the user is a win-win, especially in the cutthroat breakfast biz! 



七 he 

V»cld Wa 朽 k 

y \ o ^ a 

o-f alloWm^ 
ov-dev- bo 50 

七 Wrou^v 


is wo loy\^cv* 3 

^voklcw 0 乙 k- 

wmu 七 es f ield. 



»’m sorry bur von musr provide your name beForc 
suhinittmg nrripr. 


OK 、 


I'm iurry but yuu muM providtf ihi* ntimhMsr uf miriutt^ 
until 0ick up before submUting an order. 


f OK 
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ask them... you know you want to 


How does the plus sign (+) know to 
add or concatenate? 

Like many things in JavaScript, 
functionality is determined by context. This 
means the plus sign takes a look at the two 
things being “added” and decides whether to 
numerically add them or concatenate them 
as text based upon their data types. You 
already know that “adding” two words means 
sticking them end-to-end. But problems can 
occur when you mistakenly assume that 
you’re working with one type of data when 
it’s actually another. That’s another reason 
why it’s always a good idea to check to 
make sure you provide numeric data when 
you intend numeric addition, and text for text. 

What happens when you attempt to 
add a string to a number? 

Since number-to-string conversion 
is automatic in JavaScript, mixing the two 
data types in an addition always results in 
a string concatenation. So, the number first 
gets converted to a string, and then the two 
strings get concatenated. If you intended to 
add the two numbers, you need to explicitly 
convert the string to a number using 
parselnt() or parseFloat (). 

What happens if you use 
parselnt() to convert a string 
containing a decimal number? 

Don't worry, nothing catches on fire. 

All that happens is that JavaScript assumes 
you don’t care about the fractional part of the 
number, so it returns only the integer portion 
of the number. 

How does the id HTML attribute 
tie web elements to JavaScript code? 



Think of the id attribute as the portal 
through which JavaScript code accesses 
HTML content. When people say JavaScript 
code runs on a web page, they don’t literally 
mean the web page itself—they mean the 
browser. In reality, JavaScript code is fairly 
insulated from HTML code, and can only 
access it through very specific mechanisms. 
One of these mechanisms involves the id 
attribute, which lets JavaScript retrieve an 
HTML element. Tagging a web element 
with an ID allows the element to be found 
by JavaScript code, opening up all kinds of 
scripting possibilities. 





That’s pretty vague. How 
specifically does JavaScript code access 
an HTML element? 

The getElementByld () 

method of the document object is 
the key to accessing an HTML element 
from JavaScript, and this method uses 
the id attribute of the element to find it 
on the page. HTML IDs are like JavaScript 
identifiers in that they should be unique 
within a given page. Otherwise, the 
getElementByld () method would 
have a tough time knowing what web 
element to return. 

I know you said well talk more 
about them in Chapter 9, but objects have 
already come up a few times. What are 
they? 


We’re jumping ahead a little here, so 
don't tell anyone. Objects are an advanced 
JavaScript data type that can combine 
functions, constants, and variables into one 
logical entity. A method is just a function 
that is part of an object, while a property 
is a variable or constant in an object. On 
a practical level, JavaScript uses objects 
to represent just about everything—the 
browser window is an object, as is the 
web page document. That’s why the 
getElementByld () method must be 
called through the document object—it’s 
a part of the object, which represents the 
entire web page. OK, back to Chapter 2 ... 

Q/ 丨 still don’t understand the 
difference between a web page element 
and its value. What gives? 

Web page elements are exposed to 
JavaScript as objects, which means they 
have properties and methods you can use to 
manipulate them. One of these properties is 
value, which holds the value stored in the 
element. As an example, the value of a form 
field is the data entered into the field. 

Why is it necessary to know if a 
value is not a number? Wouldn’t it make 
more sense to see if it is a number? 

Good question. What it boils down to is 
why you care about a value being a number 
or not. In most cases the assumption is 
that you're dealing with a number, so it 
makes sense to check for the exception (the 
unexpected). By checking for NaN, you're 
able to make number-handling script code 
more robust, and hopefully alleviate a weird 
computation involving a non-number. 
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storing data 


Strive for intuitive user input 

Now that Duncan is no longer putting out fires, he really wants to improve 
the user experience of the just-in-time donut form. Just as the “hot donuts” 
sign is intuitive to people passing by his storefront, he wants the online 
form to be similarly intuitive. Duncan knows that donuts are typically 
ordered and served in dozens. Very few people order 12 or 24 donuts — 
they order 1 or 2 dozen donuts. He thinks the donut form should allow 
users to enter data in the most natural way possible. 

Problem is, the current script doesn’t take into account the user entering 
the word “dozen” when specifying the quantity of donuts. 



5 doW dohu-b 
9^ ^Ohvcir-tcd 
ihe 

仏釙 ks *to ihe 

P 把 W40 Wiio,. 


parselnt("3 dozen") 



The script doesn’t complain when the user enters the word “dozen” 
alongside a number... the parselnt () function ignores any text present 
after a number in a string. So, the word “dozen” is just discarded, and all 
that’s kept is the number. 



3 






Tiiis is d 
Y\oi d 



Is it possible for the donut script to allow users to enter either a number or a number and the 
word “dozen” for ordering by the dozen? How? 
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cheaper by the dozen...or not 



Is it possible to search the user 
input text for the word ''dozen”? 



If the user wants a “dozen，” multiply by 12! 

The order-by-the-dozen option can be added to the donut 
script by checking the user input for the word “dozen” 
before calculating the subtotal. If the word “dozen” 
appears, just multiply the number by 12. Otherwise, use 
the number as-is since it refers to individual donuts. 


O 




parselnt("3 dozen") 






parselnt (” 18 ”） 

TV^c 

\s y\umkcv- 

donuts ov-dcv-cd 

© 





’㉝/ 心.， DONUTS 


/ 丁 k 仙州 be\r Chtc\rcd is multiplied 

f by /2* sih£>c "the woird “dozjgh" 

[ appeals ih the ’mput data. 

3 * 12 =(^6^ 



OONUTS 广二約 


4 麟」 

eo#iTEE 






DONUTS 


cc 


COFFtLE 


(POiWT 霉 


COFFtLE 


PCW4JTS 

C>OFFH ‘ ■ 
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storing data 



k_ _ 

Java§cR?pt 


function parseDonuts(donutString) { 
numDonuts = parselnt(donutString); 
if (donutString.indexOf("dozen") ! 

numDonuts *= 12; 
return numDonuts; 


The custom parseDonuts () function is responsible for processing donut 
quantity input data. It first converts the data to a number, and then checks for 
the appearance of the word “dozen” in the input data. If “dozen” appears, 
the number of donuts is multiplied by 12. Get this recipe at http://www. 
headfirstlabs.com/ books/ hjjs/. 

Chc^k -to see i-f -the 
woird appear 

•… the ihpu-t daia. 

1) \ 


/Vlultifly r\urwbcv 

dor\u*ts by 12- 


Parsing dozens of donuts 


The parseDonuts () function is called in the updateOrder () 
function, which is when the subtotal and total are calculated from the 
user-entered data. 

(hitialiic the -two 
^Ohs-tahts. 


doy\u"ts 




function updateOrder() 
const TAXRATE = 0.0925/ 
const DONUTPRICE = 0.50; r 

var numGlazedDonutl -"pJrseDo^^ -value); 

if (isNaN(numCakeDonuts)) 匕（咖⑶祀扯 • getElementB y M ("glazeddonuts ” ） .value) 

• n ™ C ^eDonuts = 0/ - - 1^ ihc humbev o-f dohuts is 

1 n== : tTfrl ) / “ sd 匕 a 

var + nUmGlaZedD ° nUtS) ^ D ◦猜腑吸 

var total 二 subTotal + tax; J ^ - Cakulsic ihe sub-total, iay., "total. 

document.getElementById(»subtotal»).value = + subTotal toFnv.H/9^ 

document.getElementById("tax") .value = + tax toSlSfP ； ； 

document. g etEle m entById(^ totals, value = + t^tal^xe ； ( 2 )； 


OYi 


七 he fajc- 
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slam dune donuts 


Just-m-time donuts a smashing success! 


Life is good now that Duncan and his just-in-time hot donut idea has 
been fully realized in a JavaScript-powered page that carefully validates 
orders entered by the user. 




Now donut lovers can 
order their piping hot 
donuts online and just 
in time. 


ove? 




Hot Donuts 

Just in time! 


Duncan's JiisMn-Time Donuts 

Atf dotititR caka or g ㈣ W 

Name: 

# caKs? donuts: 

# of glazed donuts j . 

Mioutfis 'till pinkup: 

SuDtotal: 


15 


dozen 


Tax ； S 2.91 
Total ： fs34^41 


80 Chapter 2 

















storing data 



JavaScPiptcposs 

Data isn’t always stored in JavaScript code. Sometimes 
it gets stored in the rows and columns of a crossword 
puzzle, where it waits patiently for you to uncover it. 



Across 

4. When you set the value of a piece of data upon creating it, 
you.it. 

6. The unique name used to reference a piece of data. 

7. The JavaScript keyword used to create a variable. 

9.3.14,11, and 5280 are all this data type. 

10. A coding convention that involves naming identifiers with 
mixed case, as in ThisIsMyName. 

11. It's not a num-bah. 

12. A piece of information whose value can change. 

13. An piece of data with an on/off value would be stored as this 
data type. 


Down 

1. A piece of data whose value cannot change. 

2. The data type used to store characters, words, and phrases. 

3. When a value isn't set for a variable or constant, the data is 

considered. 

5. The built-in JavaScript function used to convert a string to an 
integer. 

8. The process of checking to make sure user-entered data is 
accurate is called. 

10. The JavaScript keyword used to create a constant. 
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JavaScriptcross solution 



JavaScriptcross Solution 
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storing data 



Fold the page vertically 
to line up the two brains 


and solve the riddle. 



V 嫩 


Wkat cto we all want for our script ctata? 


I Vs a mcctmj o-f *thc m’mds, <r 





There are lots of things 
I want for my script 
data, but one thing in 
particular comes to mind. 


- 




User input is tke kind ol data tkat 
you slioulctn’t trust. It’s just not sale 
to assume tkat users will enter data and 
ckeck to make sure it is OK. A more secure 
storage solution involves using JavaScript. 


you are here ► 


83 












exploring the client 




+ Browser Spelunking 



Sometimes JavaScript needs to know what’s going on in the 

World around it. Your scripts may begin as code in web pages, but they ultimately 
live in a world created by the browser, or client. Smart scripts often need to know more 
about the world they live in, in which case they can communicate with the browser to 
find out more about it. Whether it’s finding out the screen size or accessing the browser’s 
snooze button, scripts have an awful lot to gain by cultivating their browser relationships. 


this is a new chapter 


JavaScript, client, server love triangle 


Clients, servers, and JavaScript 

When you click a hyperlink or type a URL into your web browser, the 
browser requests the page from a web server, which then delivers the page 
back to the browser, or web client. JavaScript doesn’t enter the picture 
until just before the browser displays the page. The JavaScript code in the 
page then works in concert with the web browser to respond to user 
interactions and modify the page as needed. The part of the web 
browser that runs JavaScript code is called the JavaScript interpreter. 


① The browser requests the 
page from the server. 


0 © 0 


Durban 、 just-in-Time Donuts 


ii 


'10 


*9 


Duncan , s Just-In-Time Donuts 

Alt donots 50 cents eaoh r csk& or glazmdl 

Name: |Alan 
#of cake donuts: IS 
# of glazed donuts: 4 dozen 
Minute© 'til pickup: 




3H 


4 


o 


5 


Subtotal: 


10 

sli.so 


Tax:|S2.9i 
Total: ls347l 


⑧ The browser displays 
the page. 




Plsrp Ofrifr 


④ JavaScript validates 
form fields as the user 




enters data on the page. 




Done 


® The order is. 


dode 

\TUhS Chti\rcly oh the 
dskih^ ho'thih^ 
o( the scvvc\r. 



Once a page has been delivered to the browser, the server 
is largely out of the equation. Virtually everything that 
JavaScript does from there on out is confined to the browser. 
This makes pages more responsive since they don’t 
have to wait for the server to process and return data. This 
process is why JavaScript is known as a client language. 
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exploring the client 


GET / HTTP/1•1 ^ 

Host: www.duncansdonuts.com 

Connection : close . , 

Accept-^mage/gif^'Sage/x-xb.tmap, .mage/jpeg, xmage 刃网， 

^^entf^ilW5：0 (Macintosh; U ； 工 


rv 


. 8 . 1 . 7 ) 


HTML tells 

。” i\\t 阿 . 


s 


s 


Serve 




<html> 

<head> 

<t ^ tle>DUnCan，S J ^t-In-Time Donuts</ t i t i e > 


<sc^fpt^ type= M text/javascript "〉 
junction updateOrder () { 

• 奉參 

function parseDonuts(donutstring) 
function placeOrder() { 


CSS — p ， p^ y . 


<> 


£r 


(script> 
</he^d> 


JavaScript makes *t^c 
pay m*tcv*a£.*tWC) 七 h |S 

tasc val'idatm^ data 
cy\*tcv-cd 1>Y uscv- * 

⑧ The server responds 
with the page. 


<body> 

<div.id="frame n > ^ 

j iv 芑 == ，：喆 _ Time D onuts</div> 

<d " v 切 =” left ”> 5 d ° nUtS 50 沈扯 3 each, cake or glazed - </ div > 

</= 咖 ” d 。 啸庵 侧 ” alt m Tlme Donuts „ 7> 

<div id= M right M > 

</div> 

</div> 

</body> 

</html> 


Server 


i 


/ 


the server. 





Are there other tasks that make more sense to carry out on the client instead of the server? 
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ask not what you can do for your browser... 


What caw a browser do for you? 


Your client web browser is responsible for running JavaScript code, 
which allows scripts access to the client environment. For example, a script 
can get the width and height of the browser window, as well as a history 
of visited web pages. Other interesting browser features that are open to 
JavaScript include a timing mechanism that works sort of like an alarm 
clock, and access to cookies, which allow you to store data that hangs 
around even after you leave a page or close the browser. 

browser wefrics 

Browser metrics include 
various measurements 
associated with the size of 
the browser window, the 
viewable web page, and even 
information about the browser 
vendor and version number. 



browser history 

The browser history is the list 
of recent pages visited. You 

can use JavaScript to access 

this list of pages and direct 
the browser to one of them, 
effectively creating your own 
browser navigation controls. 



Cookies w 

Cookies are like variables that 
get stored on the user’s hard 
drive by the browser so that 
they last beyond a single web 
session. In other words, you 
can leave a page and come 
back, and the data’s still there. 




Timers 

Timers allow you 
to trigger a piece of 
JavaScript code after 
a specified amount of 
time has elapsed. 


These features are not all the client has to offer your scripts, but they 
should give you the idea that there’s more to JavaScript than what exists 
within the page. In fact, there are plenty of situations where it’s helpful to 
look beyond the page and get a little help from the browser. 
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So JavaScript is part of the 
client? 

Yes. Web browsers that support 
JavaScript come with a JavaScript 
interpreter that’s responsible for reading 
JavaScript code from a page and then 
running that code. 

If JavaScript code runs on the 
client, how does it relate to the server? 



JavaScript code doesn’t typically 
have a direct association with a web 
server since it runs solely on the client. 
JavaScript is commonly used to intercept 
web data as it is relayed from server to 
browser. However, it's possible to write 
scripts that request information from the 
server and then process and display that 
information on the page. That scripting 
technique is called Ajax, and we talk about 
how to use it in Chapter 12. 


Does JavaScript allow you to 
control the client? 

Yes and no. Although web browsers 
allow JavaScript to access certain parts 
of the client environment, they don’t allow 
JavaScript unlimited freedom for security 
reasons. For example, most browsers 
don't allow scripts to open or close 
windows without the user's approval. 


The (Rock is too happy 


Remember the iRock? Your JavaScript was such a success that it got 
bought out by Alan, a young entrepreneur. But he’s called you back in, 
because there are some problems... Users are unnerved by the iRock’s 

persistent state of happiness. Sure, we all want our pets to be 
happy, but the iRock seems to have a severely limited emotional range. 


Once clicked... 
ril smile forever! 



I’m digging the idea of a pet thafs 
permanently happy but users want 
a tad more realism. So I guess youll 
need to revisit that code... 


O 

o 


磁 r 

?0 ssA)\”M 0 • 





The problem with the iRock has to do with user expectations. The idea 
behind a virtual pet is that it should be as much like a real pet as possible. 
Your challenge is to figure out how to improve the behavior of the 
iRock to make it more realistic. And it seems as if the client web browser 
may hold some of the solutions to the iRock problem... 
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iRock emotions 


The iRock needs to be more responsive 

Let’s consider some possible behaviors for the iRock, with the goal of 
trying to make the rock more realistic and engaging to the user, not 
to mention more interactive. Ideally, the iRock should become more 
responsive to the user as it increases its range of emotional behavior. 


Rock rage 



The iRock randomly 
gets mad for no reason 
whatsoever, which makes 
the owner have to calm 
the rock down. 


Download the laicsi code (or iRodk 1.0 at 
/ v/Y/whcad-Piv-silabs.dom/books/li-fjs. 


depressed 


requiring the user 
leave the browser 
to kee P the rock f r 
having a breakdon 





The iRock reverts back 
to being lonely when left 
alone, requiring the user 
to click it periodically to 
give it attention. 






Which of these behaviors makes sense for the iRock to have? How would you 
use JavaScript to implement these behaviors in the iRock script? 
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I like the idea of a rock that gets 
lonely after a while, because thafs what 
pets do in the real world. Can we change 
the iRock's behavior over time? 


JavaScript lets you know when the user is 
doing something... and when they’re not. 

The idea of a rock that gets lonely is interesting because it 
prods the user to interact with the rock without guilt overload, 
and it rewards the user with a positive response from 
the iRock. The challenge is to somehow use JavaScript to 
change the emotional state of the iRock over time. The idea 
is to wait for a certain amount of time, and then change the 
iRock’s state if the user hasn’t clicked it and the time elapses. 



S-blrt the ii 





00:00 




\ 


User doesn’t touch the 
rock for a period of time 


..弓 sc^ohds la*tcv. 


00:05 


Rock is happy- 


弓 sedohds, 

-Po\T example. 



Rock is lonely. 
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time is on my side, yes it is 


Timers connect action to elapsed time 

JavaScript allows you to set timers. A JavaScript timer works like an 
alarm clock: you tell it how long to wait, and when that amount of time 
expires, a certain piece of code will run. Unlike an alarm clock, however, 
JavaScript timers are triggered when a certain amount of time 
has passed, as opposed to triggering at a certain time. This isn’t a 
problem, it just means you need to think in terms of time delays instead 
of exact times of day. 



Now 


Delay 


TV^c dclaY coY\broU *t^c 


Later 


T\\t timer stav-ts as 

SOO 灼 ds you set 


TWis codt tailed 


alert( 


Wake 


up 


丁 he timev- CXpiv-CS 

wkh the delay elapses. 


The cool thing about JavaScript timers is that they allow you to run any 
code you want when they expire. Some web pages with regularly changing 
data use timers to refresh themselves after a certain delay, while others use 
timers to detect when the user hasn’t interacted with the page in a while. 


Timers let you run 
JavaScript code alter 
a certain amount oi 
time kas elapsed. 
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breaking down a timer 

The two key pieces to setting a timer in JavaScript are 1) establishing 
the time delay and 2) letting the timer know what code to run 
when the delay elapses. The timer starts ticking down from the 
moment you set it. 


Display a message. 


^ The time delay is expressed in milliseconds, 

皆 ' which is 1 ， 000th of a second. Multiply the 

number of seconds you want by 1,000 to figure 
out the number of milliseconds. For example, 2 
seconds is 2,000 milliseconds. 



refresh () ； setTirneout (refresh, 120000); 


The code that is run when the tinier expires can be 
any JavaScript code you want，including a single 

statement, multiple statements (each with a 
erminating semicolon)，or a call to either a 
uilt-in or custom function. 


RcWcsh the v/cb 鈿 。 ^ ^ 

When normal JavaScript timers expire and the timer code is run, the timer 
is over, kaput. This type of timer is known as a one-shot timer because 
it triggers a piece of code exactly one time. It is also possible to create 
an interval timer, which sets multiple intervals instead of a single delay. 
An interval timer continues to call the timer code repeatedly after each 
interval until you tell it to stop. Although interval timers certainly have 
their place, the iRock’s loneliness timer is definitely a one-shot timer. 


The timer expires, 
I get lonely, end 
of story. 


0 





Match the following amounts of time in milliseconds with their equivalents. 


E%eftct$e 


500ms 

300,000ms 

5,000ms 


5 minutes 
5 seconds 
1/2 second 
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time is limited act now 



Match the following amounts of time in milliseconds with their equivalents in seconds 



5 minutes 
5 seconds 
1/2 second 


Seta timer with setTimcoutO 


The built-in JavaScript function that makes (one-shot) timers possible 
is se t Time out () . The two pieces of information you’ll need for the 
function are the timer delay and the code to run when the timer 
expires (available at http://www.headfirstlabs.com/books/hfsd/\ but not 
necessarily in that order. Here’s an example: 

"The 

sets a OhC—shot tirwcv. 


TV -tiry»c\r delay is 
^00,000 rhillisc^ohds, 
whidh is boo scdohds, 

is lO r^ihu-tcs. 


setTimeout("alert('Wake up!'); n , 600000); 


TVic JavaS^pt todt »s / 
pv-ovidcd *to sc*tT'imcou*tO as 
d 0 *(" 七以 七 ， is 

y/V^y »*t mus*t be ms'»dc quotes. 



⑶七 Vie tWcv- c^iv-cs, 
dy\ alcv-t bo% is displayed. 


C v C ^ pu t Co ^ as ih a 

卜 “ it,s 


This call to the setTimeout () function creates a timer 
that waits 10 minutes and then displays an alert box. 
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A closer look: the sctTimcoutO fuwctiow 

Here’s the general form that the se t Time out () 
function takes: 



_ Bu\ost tVic *tv/o --- 、 

-function av-jUW\Cir\*ts- 

L K Timer code L W Timer delay K ); 

TV^C code bo be vur^ Separate the two The delay, *m . , ^ , 

絀⑼ ^ tirnev Clives. +Uhdtioh airgu^Chts. m-.Hisc^ds. 


T\\t Code, bo be 
y^\\tv\ -tiiC timer Clives 

Setting an interval timer is similar to setting a one-shot timer, 
except you call the set Interval () function instead of 
se t Time out () . The end result of setting an interval timer is 
code that gets run over and over as each interval delay expires: 


var timerlD = setlnterval("alert( ! Wake up !')； 

T ^ 

SW away Seta 七加饮 . 

tlW'CV" IP- 



600000 ); 


The m*mu*tcs *m 
miHisedo^ds. 


^\y\ 'm*tcv-val tn^cv- 
v-csul*ts m *tViC 
timer Code y*t*b^5 
y\ay\ v-c\>ca*tcdly a*t 
rcjulav- "mtcvvals. 




Watch it! 


The timer 
delay must be 
specified in 
milliseconds. 


A millisecond is 
a fraction of a second, so if 
you forget to use milliseconds, 
you’ll end up with some 
ridiculously short (fast) timers. 


r^l^rpen your pencil 


Tv-y *LWis Code ou*t 
•m Y ouV " v CV"S*ioir\ <Jc 

•ivo 乙 k.WW *to see 
•».f *rt y/orks kc*fov- 
*tu\nr\*m5 pay 


Write the code to change the iRock image from happy to lonely 
after 5 minutes. Hint: The iRock image element’s ID is rocklmg, 
and the name of the lonely image file is rock.png . 崔 


c 


来 Dovmload 七 iiis -pile -Cvom ivbfcp:// y/y/v/.headfi\rs 七 labs.dor»\/books/ivPjs/ 
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sharpen solution 


^Jharpen your pencil 

Solution 


Quotes a^d afostvo^cs 

avc *to ^ 

WWs " 崎 


t 



Write the code to change the iRock image from happy to lonely 
after 5 minutes. Hint: The iRock image element’s ID is rocklmg, 
and the name of the lonely image file is rock.png. 


弓* bo * looo)； 


The -five- ‘…士 delay is ^ 
^akulatcd \v\ milliscdohds by -fiv-s-t 
^OhVCV-t'mg -to rwihutcs (%^> 0 ) ahd 
theh "to billiseconds (%\ 000 ). 




TKc iRodk iw\3jc is tKa^jcd 
by settn^ a y\t^n ima^c 
-file -to svd a*t*tv-'ibu*tc 
imd^e clc^cr\*t- 


The imel^C 
clcmChi It). 


TV\c lonely 

vodk m^ay. 


Now the (Rock gets lonely! 

Be sure you made the changes in your irock. html that are detailed 
above, and give the iRock a spin. The iRock now exhibits loneliness when 
left alone (not clicked by the user) for five minutes. Granted, this time 
delay may make the rock seem a bit needy but the idea is to keep the user 
engaged. Besides, a pet in need is a pet indeed! Or something like that... 





A li"tcv~ally 匕。 uirfcs dowh , 

■the amouh-t cvp 'happy tiW 

ic iRo^k. 


V*ervtdihih^ *fo\r -the 


/ 



/ 


/ 


〆 


〆 






HapfmCSS IS ir\OV/ 

-(*ov "tVic iRotkj y/WiA is 
move 



Cl 


6 ee} Bits 


You can speed up the iRock’s emotional 
changes by using a smaller timer delay 
when calling the setTimeout () 
function. This is a great way to test the 
script without having to wait around. 
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0 ^ ~ 一 


the tirncv 
^Y^s, happ'mess 
sy/i*tdlics -fco lohdihess. 


/ 




〆 




〆 


If the idea is for the iRockto always 
return to the lonely state after 5 minutes, 
why isn’t an interval timer used? 

The answer has to do with how the one- 
shot timer is used. Even though the rock is 
capable of periodically getting lonely, it only 
gets lonely following a period of happiness. 

A timer gets set at the initial click, the rock 
becomes lonely when the timer expires 5 
minutes later, and then stays lonely until it 
is clicked again. That doesn’t sound like the 
role of an interval timer. It’s different than 
how an interval timer works—an interval 
timer would trigger every five minutes, no 
matter what the user does. 

What happens if the user closes 
the browser before a timer expires? 


A ： 


Nothing. The JavaScript interpreter is 
shut down when the browser closes, and all 
JavaScript code is stopped, including any 
outstanding timers. 


tJiereiare no ^ 

Dumb Questi9ns 

How can I create a timer that 
triggers code at a certain time of day? 

Since timers are based upon delays, 
not specific times, you have to convert the 
time of day into a delay. This can be done by 
subtracting the current time from the desired 
trigger time. This calculation requires some 
help from the JavaScript Date object, 
which you'll learn more about in Chapter 9. 

I have a page with data that 
changes, so I’d like to refresh it every 15 
minutes. How do I do it? 


A ： 


Use the setlnterval () 

function to set an interval timer for 15 
minutes, which is 900,000 milliseconds (15 
x 60 x 1000). You need the timer code to 
refresh the page, which is accomplished 
by calling the reload () method of the 
location object, like this: 
location.reload(); 

The timer now triggers the page refresh 
every 15 minutes. Of course, you could also 
use Ajax (Chapter 12) to dynamically load 
the data instead of refreshing the page. 





I understand that an interval timer 
continues over and over. How do I make 
an interval timer stop? 

A function called 

clearlnterval () is used to 
clear an interval timer that has been 
set with set Interval () ■ The 
clearlnterval () function requires 
you to pass it the ID of the interval timer 
to be cleared, which is returned by the 
setlnterval () function when you 
create the timer. Yes, functions are capable 
of returning information. After storing away 
the return value of setlnterval (), 
in timer ID for example, just 
pass it to clearlnterval () 
to kill the timer, like this: 
clearlnterval(timerlD) ■ 
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browser exposed 



The Bvowscv 

This week’s interview: 

Confessions of a web client 


Head First ： Thanks for taking some time out of your 
busy day to sit down for a chat. 

Browser ： Busy is right. As if I didn’t have my hands 
full with HTML and CSS, and all the page rendering 
headaches involved with those two characters, now I 
have to contend with JavaScript. That’s a whole different 
animal. 

Head First ： What do you mean? Is JavaScript wild and 
untamed? 

Browser ： Uh, no. I didn’t mean “animal” literally. I 
just meant that JavaScript brings its own unique set of 
problems that I have to worry about. Now I have this 
whole new job of reading JavaScript code, hoping for the 
life of me that it isn’t coded poorly, and then running the 
code while simultaneously keeping a close eye on HTML 
and CSS. 

Head First ： I see. How do those three get along? 

Browser ： Fortunately, that’s the least of my problems. 
Those three guys usually work well together, although 
occasionally JavaScript will get frisky and mangle some 
HTML code. Problem is, there usually isn’t anything I can 
do about it because my job is pretty much to do as I’m 
told. 

Head First: So you fashion yourself as somewhat of a 
u yes man?” 

Browser ： I suppose that’s one way to put it, but it’s more 
accurate to say that I value consistency above all else. I 
do things by the book. My job is take the code the server 
gives me and do exactly as it says. 

Head First ： Even if you know it’s wrong? 

Browser ： I try my best to sort out problems when I 
see them but that’s a tough gig. Besides, that’s a topic for 
another day (Chapter 11).1 thought we were going to talk 
about my role as a web client. 


Head First ： Oh yeah, I lost track. So what does it mean 
to be a client? 

Browser ： Well, it primarily means that I stand on the 
receiving end of the web page delivery channel, receiving 
pages after requesting them from the server. 

Head First ： What does that have to do with JavaScript? 

Browser ： An awful lot, actually. As I handle all the dirty 
work of displaying web pages and processing user input, 
JavaScript is there next to me sticking his nose in and 
changing things. But that’s not all bad. There are lots of 
neat things JavaScript can do that I wouldn’t dare do by 
myself. 

Head First: Such as? 

Browser ： Well, I would never take it upon myself to do 
anything special when a user hovers the mouse over an 
image or resizes my window, for example. JavaScript, on 
the other hand, is all about doing special things. It’s no 
big deal for a script to change the appearance of the page 
or otherwise shuffle content in response to client changes. 
And it’s OK by me because JavaScript code runs on a 
page by page basis, so it only impacts a specific page or 
web site. 

Head First ： You talk about JavaScript as if its some 
other entity. Isn’t JavaScript really just you? 

Browser ： It’s both. JavaScript is certainly part of me 
but you can think of it as its own entity because it can 
only access the client (me) through a limited interface. In 
other words, I don’t give JavaScript unbridled access to 
everything about me. That would be a little irresponsible 
since I can’t control who writes scripts and asks me to run 
them. 

Head First ： Got it. Well thanks for clearing up some of 
this client stuff. 

Browser ： Glad to help. 
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Multiple size screens, multiple complaints 

Alan had barely finished paying you for the iRock’s emotional makeover 
when a new wave of complaints started rolling in from frustrated iRock 
owners. It seems the size of the iRock isn’t very consistent, with some 
users reporting “shrinking rock syndrome，’’ while others are experiencing 
an acute fear of “giant partial rock formations.” You’re the guy Alan trusts, 
so time to earn some more cask fix the iRock again. 



Some usc\rs a\rc \rcpov-t*mg av\ 

r kt ~ 


users av-c 
sccnr\^ or\ly pav * 七 
a 5*»a^*b iRotk. 




What’s going on with the different rock 
sizes on different browsers? 
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size matters 


Use the document object to get the 
client window's width 

The iRock problem has to do with the fact that the size of the iRock 
doesn’t change when the size of the browser window changes. This 
might seem like a good thing until you consider the dramatic 
variation in browser sizes across all computers capable of browsing 
the Web, including tiny handheld devices and desktop computers 
with gigantic monitors. You need a way to check the size of the 
browser window, which can then be used as a measure to resize the 

r ° Ck lma§e The di ⑶七 wmdoy/ is y/hai holds 

■the vodk is -thcv-c-Pov-c 

what you use to -Pijuv-c out 


Tke client winctow is 
only tke part ol tke 
browser window tkat 
displays a wet page. 


Ko-t \>art d 
i\\t 

v^wt. 



CVwt 

Y/'mdov/ 


It’s important to distinguish between client window width and height, 
as compared to the overall browser window width and height. The 
client window is only the part of the browser window that displays 
the page, which means it doesn’t include title bars and tool bars. The 
iRock’s size should be calculated based upon the client window size, 
not the overall browser window size. 
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exploring the client 


Use document object properties to 
set the client window width 



The client window size 
is closely associated 
with the web page, 
which you access in 
JavaScript using the 
document object. This 
is the same object you 
used to access elements 
on the page with the 
getElementByld() 
method. The 

body.clientWidthand 
body.clientHeight 
properties of the 
document hold the width 
and height of the client 
window. 



TV^c bo 


^ QJC xnc vc^cscirrb 

如 v ⑷ bl ?art 


objedt \rcp\rcsch-b 
the web page itscl-P. 


<html> 

<head> 

<title>iRock - The Virtual Pet Rock</title> 
<script type= M text/javascript"> 
var userName; 
function greetUser() { 

alert ( 'Hello, I am your pet rock .')； 


function touchRock() { 

if (userName) { 

alert ( n 工 like the attention, 


userName + ". Thank you .")； 


else { 

userName = prompt("What is your name ?，、 
if (userName) 

alert ("It is good to meet you, " + userName + 


Enter your name here 

. n ); 


document.getElementById( ，， rockImg n ) .src = M rock_happy. png"; 
setTimeout (’'document. getElementByld ('rocklmg'). sre = ' rock, png 
5 * 60 * 1000 ); 


</script> 

</head> 

<body onload="greetUser();"> 

<div style="margin-top : lOOpx; text-align:center n > 
<img id=’’rockImg n src= n rock.png" alt= M iRock M style: 
onclick= n touchRock();" /> 

</div> 

'</body> 

</html> 


cursor:pointer' 


thereiare no ^ 

Dumb Questi9ns 


So just to be clear, what’s the difference between a web 
client, a browser, a client window, and a browser window? 

Yeah, it can be a little confusing. In terms of the Web in general, 
a browser is referred to as the web client because it's on the client 
side of the serving of web pages. Within a browser, however, “client” 
takes on a different meaning, because it refers to the specific area of 
the browser window where the page appears. So the client window is 
an area within the browser window that doesn’t include the other stuff 
like title bars, tool bars, scroll bars, etc. 


Why is the client window the preferred measurement to 
use when resizing the iRock? 

The client window provides a better measurement for resizing 
the rock image because it reflects the actual amount of space 
in which the image is displayed. This eliminates variations that 
are difficult to account for, such as add-on toolbars and natural 
differences in browser windows across different platforms and 
browser vendors. For example, Safari on the Mac has a different 
browser window size than Firefox on Windows, even if the 
displayable part of each—the client window—is the same. 
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how big is big? 


There’s a style object for every element on a web page, so you can v-olk 

access the width and height of any piece or part of a page. But to the key 

access styles, you first need to access the web page element itself, in J. i c s 

this case the rock image (if you haven’t downloaded this yet, get it / 1 X \ 艺 1 仏 

at http:/ / www.headfirstlabs.com/books/hjjs/). This requires the handy 
getElementByld () method of the document object: 

<img id= n rockImg n src= n rock.png M alt= M iRock n ... / > 



document.getElementByld( n rockImg n ).style•height 



TW»s todc aacsscs 


rotY way. 


To change the size of the iRock image, just set the width or height 
property to a value. Setting either property alone will work, 
because the other property will automatically scale itself to 
keep the image’s same proportions: 

document.getElementByld( n rockImg n ).style.height 


\\\t v\t^i V^，^vb 


Sd: ihe height the rock 
⑽吵 "to lOO pixels. 



Set the height and width of the iRock image 

Knowing the client window size isn’t all that useful in the iRock script without 
being able to resize the rock image as well. Fortunately, you can tweak 
the size of an image using JavaScript with a little help from CSS (even if CSS 
isn’t your style). The width and height properties of an image element not 
only allow you to initially determine how big an image is, but also allow you to 
dynamically resize the image when needed. 
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The (Rock should be sized to the page 

You still don’t have a calculation to use to alter the rock image size based upon the client 
window size. Since the rock size must change in proportion to the client window size, 
we want to set the rock size as a percentage of the client window size. 

But should you base the rock size on the width or height of the client window? Since 
browsers tend to be more tightly constrained vertically, it’s safer to base the rock image 
size on the height of the client window. 


TV\c dhc 朽七 

WmdoY/ he 吵七 



(clientWindowHeight - 100) *0.9= rocklmageHeight 


J 


\00 f 


°{0% o-f what’s 

Ic-Pt M\rti 乙 ally. 


r^l^rpen your pencil 


This calculation accounts for the vertical spacing of the rock on the page 
(100 pixels), and then sizes the rock image to 90% (0.9) of what’s left. 
Sometimes calculations like this require a little trial and error to test them 
and find out what works best. You’ll have to try out your iRock to see how 
it works... but first, there’s code to write. 


Write the code for the resizeRock () function, which should 
resize the rock image based upon the client window size. Also 
add code to the onload event handler to call resizeRock () in 
addition to greetUser (), which was already being called. 
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sharpen solution 


(^Jterpen your pencil 

Solution 


Your job was to write the code for the resizeRock () 
function, and also to add code to the onload event 
handler to call resizeRock (). Don’t forget to make 
sure greetUser () still gets called! 


TKc votk s'izjc is 
^al^ulaied based ufcm 
七 he v/mdov/ 


TV IP d 七 ^ 圹 0 沙 

is used *to yt 
clcwc^t 


function 


resizeRock() 

.do.u^t 

^ fdo^ehibody ： di^ ^ loo) * 

I ... 

• • • 

〈body onload:>esi«^kO; gvcctUserO/ ; 

</body> 


> 


revw 


tailed i\\t fajc 
loads. IVs fcv^^bly ^ -to 
*t,ic moV*C *b^3ir\ or\C ^\tCt o-P 
Code, bo 3^ cvcir\t 


Suk-t^att \00 —Is 

-to attouy\*t -fov- 
vcv-t'»tal position c^f 
七 he v-otk. 


W oHhe 

^c^aihihg 
wihdow si2^. 


^^^^BULIET POINTS - 

■ The setTimeout () function allows you to create 
a one-shot timer that triggers JavaScript code after a 
period of time has elapsed. 

■ To set a timer that repeats at a certain interval, use 
setinterval (), which will create an interval timer. 

■ Always specify timer durations in milliseconds, which are 
thousandths of a second. 


■ Web page elements have a style object you use to 
set style properties, such as width and height. 

■ The client window is the part of the browser window that 
displays the web page and nothing else. 

■ You can access the width and height of the client 
window using the body. clientwidth and 
body. clientHeight properties of the 

document object. 
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exploring the client 


Your iRock...evolves! 



Users are no longer reporting problems with their pets, and Alan’s just 
about ready to give you a ton of stock options. Everyone is happy... for now. 


With your code changes, the iRock has evolved to 
adapt to each unique browser environment. Make 
sure you update your iRock. html (available at 
http:/ / www.headfirstlabs.com/books/hjfjs/) to match 
page 104, and then load it in several browsers 
and different window sizes. Try it out on your shiny 
iPhone if you want, too! 


Tiic siz^ <Jc v-otk 
imd^e v\o^ vav-ics ^ 
a^ovd'm^ *to 

of bvoy/sc\r >w'mcloy/. 


thereiare no o 

Dumb Questi9ns 


I still don’t get the point of the 
100 in the iRock image size calculation. 
What’s the deal? 


Can I change the size of anything 
I want using the width and height 
CSS style properties? 


The HTML/CSS code for the iRock 
page places the rock image 100 pixels down 
the page so that it isn’t jammed against the 
top of the client window. The calculation 
accounts for this aesthetic positioning by 
subtracting the 100-pixel offset before 
figuring the rock height as a percentage 
(90%) of the client window height. There’s 
nothing magical about 100 pixels, it just 
happens to position the rock in a good spot 
on most browsers. 


A 


Pretty much. This hopefully is starting 
to give you a clue as to how powerful 
JavaScript can be when it comes to 
manipulating web page content. In the case 
of the iRock script, it’s the power of being 


able to query the client window for its size 
and then using it as the basis for changing 
the size of an image. 


Why not just change the iRock 
image size in JavaScript code in the head 
of the page, as opposed to using the 
onload event? 

This problem has to do with web 
page content not getting loaded until the 
onload event fires. So if your JavaScript 
code accesses elements on the page, as 
the iRock code does, you can't run any code 
earlier than the onload event. 
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dynamic sizing 


So what happens to the iRock when the browser is 
resized? DoesiVt the rock image stay the same size? 


O 


o 



No, the rock size isn’t dynamic. 

Some users are bound to resize their browser windows, and the 
iRock won’t change size when this happens. These users won’t be 
happy campers. That’s because the rock image size is only altered 
when the page first loads, in the onload event. From then on, 
nothing that takes place results in an image resize. Unfortunately, 
we’re back to where we started: 



The v*o^k s-fcciys 
the same sizjg whch ihc 
bv-owsev* window is vcsizjcd. 
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exploring the client 


onresize is triggered when the browser's resized 


In order for the rock image size to maintain its size in proportion to the client window of the 
browser, your script needs to know when the user resizes their browser window. Browser resizes 
are communicated using an event called onresize . The onresize event is fired whenever the 
browser window is resized, and it’s just what you need to catch in order to resize the rock image 
when the browser window size changes. 



Resizing the browser 
window fires the 
onresize event— 


which causes the 
event handling code 
to be executed. 






To respond to an onresize event, just assign JavaScript 
code to the onresize attribute of the <body> tag. 



One of these things is not like the other. Which one is it... and why? 


onload 


onresize 


onclick 
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you gotta know when to grow 'em 

- ^harped your pendl 

Solution 


One of these things is not like the other. Which one is it... and why? 


onload 


onresize 


onclick 


The oh\rcsi« Bv\d ohdidk cvc^*U Bvt *tv"iO|^C\rcdi by usev, ohlodd is ho*t- 


The onresize event resizes the rock 


Now it’s time to reap the rewards of creating a function that resizes the 
rock image. To resize the rock image in response to a browser window 
resize, you have to call the resizeRock () function in response to the 


onresize event: 


T\rijgc\rcd whe" the page -fiv-st loads. 


T\rijjc\rcd when the b\rowscv- 

厂 window is vesiz^d- 



The \rcsiz^RodkO 
is still called whch the 
*Pi\rst loads "fco m'rkially set 
"tKc >rot\c imol^ siz^. 


You CBy\ £>dll w'OV-C *tKa^ 
ov\C of to&t m 
vcs^ohsc *to cvcirvt 


Now the \rcsiicRodkO -Puh^-tioh is 

also dal led a^y time the browser 

wihdow is \rcsiz^d. 


The iRock’s image size now automatically adjusts 
whenever the user changes the browser window size. 


Tke onresize event makes 
it possible to detect and 
respond to ckanges in tke 
browser window size. 
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exploring the client 



Watch it! 


Be careful 
when resizing 
images in 
JavaScript. 


This is especially 
important when making small 
images larger. The quality of the 
image can sometimes suffer. 



dc*tc£.*b 3 m 

al*tcv*s y/ck pay 
vcs^onsc *to 



Alan is feeling the love from users who now realize that the iRock is 
immune to variations in browser size. Not only does the iRock size 
initially adjust to fit the browser’s client window, but it dynamically 
adjusts if the user resizes the browser. 
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temporary browser amnesia 


Have we met? Recognizing the user 

The iRock size problems are now a thing of the past... but what 
about when users click the iRock more than once to keep it 
from feeling lonely? And when they come back to the rock after 
restarting their computer? 



Even though the iRock has definitely met its owner at some 
point in the past, it is somehow forgetting the user’s name... 
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exploring the client 


Every script has a life cycle 


The iRock’s memory loss is related to the life cycle of a script, 
which affects the data stored in the script’s variables. 

The b\rowscv- is 


bushed - 



JavaSc.v-'»p*b c.\c^y\s 
up all v3viablcs, av\d 
七 he pay is closed 


JavaScript destroys ALL 

variables vken tke Lrovser 
closes or tke page reloads. 

■ - — - O ^ ■■ 



Tiic usev closes 
*tKc bvoy/sev- ov 
vcloads *tKc pa^c- 



T\\c yay is loaded -fvom 

*tiic y/eb sevvev—HTML, 

CSS, JavaStv'ift a^d all- 


Th 

-fibres, Javcl£^ip-t 
variables diYt ^v-catcd 
3hd ihitializjcd 






So how would you tweak the code to fix the problem 
of the iRock forgetting the user’s name? 
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c is for cookie 


Cookies outlive your script's life cycle 


The problem that we’re having with the iRock has a name, and it’s called 
persistence. Or actually it’s the lack of persistence. Sometimes you need 
data that never really goes away. Unfortunately, JavaScript variables are 
fleeting, and are destroyed the moment the browser closes or the page 
refreshes. Browser cookies offer a way to store data persistently so that it 
lasts beyond the life cycle of a script. 

A cookie is a piece of data stored by the browser on the user’s computer. 
Cookies are a lot like JavaScript variables except that cookies hang 
around after you close the browser, reload a page, turn off your computer, 
remodel your house, etc. This makes cookies a handy option for storing 
the user’s name in the iRock script. 




七 he bvoy/sev is closed, 
七 he y/\ri*tes 七 he user 

*to 3 d-ookic* 




ihc page is opehed 
agaih laicy, ihc usev- 
Cookie is mead 
"theiv havd disk. 


丁 Wov/scv' 
a C.ollc£>*t»oy\ o( took'ics 
have ortaitd 
\)\j d*iWcv-cy\*b 


Thc 饮 sio^s ih e us ^ 

^c^ookic oh theiv havd 

disk -Poir safe kccpi h g. 
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exploring the client 


W 





The -f irst hrnc the 
^eeis ihe iRo^k, ihc 
use\r’s ha^c is s-fcov-cd 
JavaScript variable. 


A temporary JavaScript variable is fine to use 
while a script is running, but you need to store it 
away in a browser cookie if you want its value to 
last beyond a single web page viewing. Initialize 
the variable with the cookie value when the 
first starts, and then write the variable 


scrij 

value back to the cookie when the script finishes. 


TV ⑽ 、一 e sM 

• m a vav'oklc s <> -tV^a-t ^ 

d • 外 layed 七 ^ vodk. 


Start here! 



finish! 





\JJ 






— i^^rpen your pencil 


Write down some other kinds of web page data that you might 
store persistently using cookies. 
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variable and cookie faceoff 


Fireside Chats 



Tonight’s talk ： Variable and cookie weigh 
the importance of persistent data storage 


Variable: Cookie: 

I don’t understand why we’re talking — you don’t 
really have anything to do with JavaScript. 

Well, you’re half right. I definitely do my thing 
without the help of JavaScript, but I still have an 
important connection to JavaScript, too. I provide a 
way to store data persistently. And as you’ve probably 
figured out, JavaScript isn’t big on persistence. 

I see where you’re headed. You think that I’m 
somehow a lesser data storage option because I get 
clobbered every time the browser is closed or a page 
is reloaded. Still, I am very accessible... unlike some 
people. 

Inaccessible? I’m always right there in the browser, 
ready to be called upon at any time. 

That may be, but don’t you live in tight quarters 
among a bunch of other cookies? 

Yes... and? 

Well, if the rumors are true, it takes a lot of effort 
to look up a single cookie... you’re all just stored in 
one big list. What a pain! That’s what I mean by 
inaccessible. 


Well, yeah, us cookies are stored in a big list, but we 
have unique names, so it’s not all that hard to get to 
us. You just have to know how to break apart the list 
to find a particular name. 


— your pencil 

Solution 


Write down some other kinds of web page data that you might store 
persistently using cookies. 


Uscv ID, ^Co^ciphidcll lo^cl*tioh, 
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exploring the client 


Variable: 

Right, but that’s the problem. There are no lists 
or anything involved in accessing me. Just call my 
name... and I’ll be there! 


Permanence is great but it doesn’t solve everyday 
problems. When you really think about it, not all 
that much data really needs to last forever. In fact, 
it’s usually more efficient to store data temporarily 
and let it go away when you’re finished with it. 
That’s where I come into play. I’m the ultimate 
temporary storage medium for script data. 


Interesting, but how do you think those items got 
added to the shopping cart to begin with? Most 
shopping carts rely on me to store temporary data 
throughout the shopping experience. I’m just as 
important... maybe even more important. Even if I 
do tend to forget things a little more quickly. 


I think you’re right. We solve different problems and 
really shouldn’t ever be competing. Although, I have 
to admit, I still prefer my ease of accessibility over 
your ability to store things persistently. 


What conversation? 


Cookie: 


You don’t need to sing. I get the point. But here’s 
the real issue. When you store something in me, I 
always remember it. It doesn’t matter if the browser 
is closed or the page is reloaded. I’m permanent... 
unless the user chooses to clear out all cookies. But 
that’s another issue. 


Whatever... I think you’re underestimating how 
important permanent data storage can be. Haven’t 
you ever been amazed by the magic of returning 
to a shopping cart days after browsing, only to find 
everything still there? That’s the kind of magic I 
make possible! 


It’s starting to sound as if maybe we complement 
each other. I always saw you as a nemesis. 


You couldn’t resist a parting jab, eh? I’ll take the 
high road and rest easy knowing that as soon as this 
page turns you’ll forget the entire conversation. 


Exactly. 
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client cookie storage 


Why don’t you just store 
persistent web data on 
the server? 



You don’t need the server for small pieces of 
information，like a user’s name. 

Ah, the server. Yes, the server is a viable option for storing data 
persistently, but it can be overkill for small pieces of information. 
Storing data on the server requires programming work on the 
server, along with a storage medium, like a database. Server 
programming and database storage are a bit much for storing a 
piece of data that you want to persist for a simple client script, like 
the user name in the iRock script. 


Cookies allow you to store data persistently on the client without 
even involving the server. Not only that, but users have the ability 
to clear out cookie data on the browser if they want to get rid of 
information web pages have stored persistently. This isn’t possible 
with data stored on the server. 



JavaScript 



Coo^fe 
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exploring the client 


Cookies have a name and 
store a value...and om 
expire 

A cookie stores a single piece of data under 
a unique name, much like a variable. Unlike 
a variable, though, a cookie can have an 
expiration date. When this expiration date 
arrives, the cookie is destroyed. So in reality 
cookies aren’t truly permanent, they just 
live longer than variables. You can create 
a cookie without an expiration date, but this 
makes it act just like a JavaScript variable — 
it gets erased when the browser closes. 


Cookies are stored on a user’s computer as 
one big long string of text that is associated 
with a web site (or domain). Each cookie 
is separated from the next by a semicolon 
(;). The semicolons are the key to reading 
through the cookie list and pulling out a 
single cookie. 


Name 

厂 論 

userName = Paul The value s-toved m ihc Cookie- 


Expires 3/9/2009 



Expiration date 

The date 4 ⑼七 dookic c^fivcs... 
ay\d i*U demise- 


S 咖” 穴士 

w akcs more 

，二 ^ 1000 







cartID = *1103 
Expires 11/4/2008 



lang = fr_ca 
Expires 6/25/2010 



iteml = Flat panel television 
Expires 9/3/2008 



Since all cookies are stored in the same place, extracting a 
specific cookie requires a little work, but there’s a recipe you 
can follow that makes reading, writing, and erasing cookies 
less daunting... 
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baking cookies with JavaScript 


Here’s the code for three cookie helper functions, which allow 
you to write, read, and erase cookies with ease. Sometimes the 
wisest approach is to coast on the work of others. Take this recipe 
(available for download at http:/ / www.headfirstlabs.com/books/hfs/) 
and make the most of your homemade cookie functions. 


BaK^ 

Java§cR?pt 

okay ^ Y ou 七 yb all 

<^f -tKis - ur\dcv*s*t 3 ^d 
\i by youVc 

Wm 

so th e coo ki e t e mPOrary 

var expires 

II specifying a number of days makes the cookie persistent^ 


if (days) 
var date 


new Date () 


f x ri ； rs t ^: ( f x ri ； e ； ^T^ t ;.STs ； r 2 i： g ;r * 60 


★ 1000))； 


// set the cookie to the name, 
document.cookie = name + + value + ex P ires 


value, and expiration date 

+ n ； path=/ 


Thc cx P'^ioh dai c 
ts cx P^sscd as £hc 
| hUyh ^lr of days ihc 
" ookic should exist 


•his expiv-atioh 

Jaic is c,a\^\aicd 
^ohvcvtihg the 
»^bcv- Jc days -to 
|illisc^ohds ; a h d -thch 
ldi"3 that humbev* 
the duv-VCht time. 


function readCookie(name) { _ 

// Find the specified cookie and return^its va^ue 

var searchName = name + n=n ; . 

var cookies = document.cookie.split (';')； 
for(var i=0; i < cookies.length; i++) { 

var c = cookies[i ]； 
while (c.charAt(0) == 1 ▼) 

c = c.substring(1, c.length); 
if (c.indexOf(searchName) ==0) n N 

return c.substring(searchName.length, c.length); 

return null; 


The dookic lis-t 
is bv-okc^ nrrto 
mdividual Cookies 
by spli-ttmj i-t 
senrtidoloirts. 


function s 2 r 3 .ssC 00 k.is (nsrns) { 

// Erase the specified cookie 
writeCookie(name , r - 1), 


var x; 
var y; 

[function doX() 


zunction doY() 


/ou cirasc a Cookie by 

\i wi ^. h ho 丄 c 

% expi^d cxpi^ ioh 
dsic (—1 days). 


cookie.js 


Cv-catc a kla^k 一 e 

•rt 6ook*ic.\s, a^d add 
todt *bo 




piles only 

JavaS^v-ip-t todc av-c 
USUdllv irtdW'Cd 
a .\s Vile 
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exploring the client 


Your JavaScript caw live 0UTS1PE 
your web page 


When JavaScript code is stored in its own file, you have to import 
it into any web page that plans on using the code. So in the case of 
the cookie functions in cookie . j s, you’ll need to import them 
into your iRock. html page. This is done with a variation of the 
<script> tag: 


<script type="text/javascript" src= n 


Pern’ 七 -fov-yt *to 山父 

W\i\\ ^ 



cookie. js"X/script> 


TV ^ oUk todt 

*,s aUays 
JavaS 6 v*^*t todt- 


The hdhrte the -file 

^° h ^ ihih 9 ^ 父 Hpt Code, 

usua, 7 wi-th j s . 


VO IttlS! Make iW\s 

addition *fco youv 1 R 0 乙 
ay\d make SUVC dook'ic js is m 

i\\t sdv^e div-cd-tov-y- 


When you import external script code into a page, all of the JavaScript 
code in the script file is inserted inside of the <script> tag in the 
HTML code, just as if you had placed the code directly in the web page. 
Any time you have code that could be used in more than one page, it’s a 
good idea to place it in an external file and import the file in the pages. 


<html> 

<head> 

' The — Pet Rock</tltle> 
<3 = t^ype ：；： text/, a - ••••.. ..•••• 

<scri Dt — .. ></ script> 


function resizeRockO { 

} ( d :: 〜 :: 二^⑶ 

function greetUsprM ； 


T\\t Wfov-tcd 

stvifb todt 

^laded *m"to *bV^c 
pay v/heyv 七 he 
loaded. 


Write down why it’s a good idea to organize reusable code into an external file. 


ExeftciSe 
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polly want a cookie? 



Write down why it’s a good idea to organize reusable code into an external file. 


Code vcusc, Colsicv -bo s\Y\tt i*t’s m or\t fldde ； bc*t*tcv 


frreGt the user with a cookie 

We need a cookie-powered version of the iRock script that can greet the 
user with a personal greeting, assuming their name has already been 
stored in a cookie. If not, the greeting can just fall back on a generic, 
impersonal greeting. It’s the best of both worlds! 


userName = Paul 
Expires 3/9/2009 


JavaS6v»\>*b 
vav*> 3 Wc- 



Read usev- 

d C-ookiC 

s*tov~c i"t 3 v3V"i3blc* 



userName 


Is there a user name? 


"This is ci*thc\r "the usev* 
h3mc...o\r hothihg/ 
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exploring the client 



Tjp C]aS 


e 


T^C ^CctUsCV-O fuir^ 七 KW IS 
vcspohSiklc W yrcth^ *tV^c 
? tV.c ? ay loads. 


uscv 


丁 he iRo^k usc\r hame cookie 
j^ccds s dcs^v-ip-tivc -ti-tlc 
that v/oh^t get r^is-takeh 
should you cvcv heed -to add 
Cookies io -the sdv-ipt. 



function greetUser() { 

userName = readCookie( M irock username "); 
if (userName) 


Its Y \0 七 add»W …十 

s 七 — 6<^6a 七 aaW! 


/r 


H 


alert("Hello n + userName H 
else 

alert ( 1 Hello , 工 am your pet rock. 1 ); 


工 missed you. M ); 


The uscv* ha^e is 

the Cookie 
ahd s Wd ih -the 
uscir/\/ary»c vaHable. 



uscv » s Cw ?^7 , ,, 
mca^s tooht d » 〜七 
Mst rnca 吣 v/davc to 

a yrtth^ 


^ 3 uscv " w 你 c v-cally did 
exist ih -the Cookie, show 
a pcirsohal gvcctihg. 


grcetUscrO is cookic-powcred wow 

What’s really going on in the greetUser () function is a data duet 
sung by a variable and a cookie. The user’s name is read from the 
cookie and stored in the variable. But you can’t count on the cookie 
holding a name... what if this is the first time the script has run and 
the user has never entered a name? That’s why the code checks to see 
if the variable really got a name from the cookie — this is the test that 
determines whether the greeting is personal or generic. 
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touch-y touch-y 


Vov\ J i forget to set the cookie, too 

Reading the iRock cookie is fine and dandy, but you’ve still got to set 
the cookie in the first place. The cookie writing should take place in the 
touchRock () function, which is called when the user clicks the rock 
image. The touchRock () function already prompts the user to enter a 
name — now it needs to write that name to a cookie after it’s entered. 



•，- f a usev 於 amc. |+ theire is a usev- 

"thahk "them pcvsohally 
^ the aUch-tioh. 


|-f isy \ ’七 a 

uSCV" 

V\ctd bo jet it 

•(•yom uSCV"- 



userName 


.Thank you."); 


Chcdk "to 
啪 ake suv-c 
"the usev- 

a^tually 

Ch-tc\rcd a 


Enter your name here.") 


function touchRock() 
if (userName) { 

alert ( f, I like the attention, 

} 

else { 

userName = prompt("What is your name? 
if (userName) { 

alert (’ 'It is good to meet you, ’▼ + userName + ’▼•’▼); 
writeCookie("irock username ", userName, 5 * 365); 

} V ^_ 

} 

document.getplementByld f"rocklmg") .src\= "rock happy.png"; 




setTimeout("aocument.getElementByld('ro^klmg')•sre 
5 * 60 * f 000 ); 


Tiicrc is d 
so ycc*b *bV\c usev 

and 

bo d fcooklC- 


This is the sdme CooV\t 
MrhC used -to \read -the 
Cookie- Cookies doh’t 
use ^amcICasc, thcyVc 
rwoirc like HTML IDs. 




'rock.png 


TKc 
value 
-fv-ow 


usev- 

IS Y/V"l 七七 c 灼 

a vahablc. 



the usev 
Cookie dV'ouhd 
^ ycavs. 

TW\s -fur\^*tior\ is ddllcd 
yj\)Cy\ *tV^c yocV 
is didked- 


<img id= n rockImg n src= ff rock.png M onclick= n touchRock (); ▼▼ / > 
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exploring the client 



onclick! 




"The usem chcki 

"the \Rock. 


In many ways the touchRock () function plays a reverse role as the 
greetUser () function, at least in terms of cookies. The user name 
is entered by the user, stored in a variable, and then written to a cookie. 


Is there a user name? 


Yes! 






j ihpu 七 m a vaviable- 

I userName = 

"Paul" 




^Paul n 


vav-iablc 
■to 3 C-ookiC- 
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hands off the cookie jar 


Cookies affect browser security 

Although most iRock users are thrilled with cookies as a cure for 
memory loss, a few users have questioned the security risks of cookies. 
This is a fair question since personal data often gets stored in cookies, 
but the reality is that cookies do not pose a security risk...at least not 
in terms of accessing sensitive data that is stored on your computer. 
However cookies themselves aren’t considered safe for storage, so it’s 
not a good idea to store sensitive data in a cookie 



Just because 
you can, 
doesn’t mean 
you should. 

Although you 
can store anything in a cookie, 
they aren’t terribly secure in 
terms of how they store data. 
So it’s not a good idea to store 


sensitive data in a cookie. 


A cookie is just a piece 
of text data stored in a 
file on your computer 




- ^ 




Since cookies aren’t 


Cookies can store personal 
data，but only when users 


Although cookies are 
typically stored on a 
hard disk, they can’t 
touch anything else 
on the hard disk. 



executable programs, have knowingly entered data 
they can’t spread into a web page. 
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exploring the client 



Are cookies always stored on the 
user’s hard disk? 

No. But the hard disk is where the vast 
majority of browsers store cookies, not all 
browsers have access to a hard disk. For 
example, some mobile devices use special 
memory instead of hard disks for persistent 
data storage. In this case, the browser uses 
persistent memory to store cookies. Even 
so, from the perspective of the browser (and 
your scripts), cookies remember their values 
regardless of how they are stored behind the 
scenes. 

How do I know if my cookie name 
is unique? 



Cookie names only have to be unique 
within a given web page. This is because 
cookies are stored with respect to the page 
that created them, including the web site of 
the page. This means the page is effectively 
part of the cookie name, at least in terms of 
uniqueness. Bottom line: just make sure your 
cookies 
within a 
page or 


Q ； i s cookie data shared across 
different browsers? 


A 


No. Every browser maintains its own 
unique database of cookies, so cookies 
set in Internet Explorer will not be visible to 
Firefox or Opera. 


If cookies are so handy, why would 
you ever store data on the server? 

A- 

First of all, cookies are only good 
for storing relatively small (less than 4 
Kb) chunks of text. That is one important 
limitation of cookies. Even more significant 
is the fact that cookies aren’t particularly 
efficient, meaning that you wouldn't want 
to be constantly reading and writing lots of 
data to them. This is where a real database 
comes into play, and databases typically live 
on the server. So while cookies are great 
for storing small pieces of data that don’t 
necessarily warrant storage on the server in 
a database, they aren’t a solution for all of 
your web data needs. And they also aren’t 
exactly ideal for storing sensitive data since 
they aren’t designed with security in mind. 


Is there any way to create a truly 
permanent cookie? 

A- 

Jr \* No. Like it or not, every cookie has an 
expiration date. The idea behind a cookie is 
not so much true long-term data storage as it 
is a means to preserve data in the mid-term. 
In other words, cookies are good for storing 
data for days, weeks, and months. If you’re 
dealing with data that must linger for longer 
periods of time, you may want to store it on 
the server instead. It's not that a cookie can’t 
store data for years, it's just unlikely that the 
user won’t upgrade computers, reinstall their 
browser, or otherwise clear out cookie data. 

Enough about cookies...is there 
any downside to storing JavaScript code 
in an external file? 

A- 

Jr \* Not really. However, keep in mind that 
the goal with external code is to make it 
easier to share and maintain the code when 
it needs to be used in more than one web 
page. If you’re dealing with code that only 
appears in a single page, you really don’t 
benefit much from moving it to an external 
file. That is, unless the page is particularly 
messy and you just want to break up the 
code for your own sanity. 


^^^BULIET POINTS - 

■ A cookie is a piece of text data stored by the browser 
on the user’s computer. 

■ Cookies allow scripts to store data that survives 

beyond a single web session. 

■ Every cookie has an expiration date, after which the 
cookie is destroyed by the browser. 


■ Moving script code to an external file is a handy way to 
make the code more reusable and maintainable. 

■ Cookies can’t access a user’s hard disk or spread 
viruses, but they are capable of storing personal data 
that has been entered in web pages. 
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no cookies for you 


A world without cookies 


Whether it’s security concerns or limited browsers, a few iRock users aren’t 
able to benefit from the cookie-powered iRock because cookies aren’t 
available in their browsers. This presents a big problem because the iRock 
script assumes everyone has cookie support. It’s one thing for the iRock to 
be dependent on cookies for memory, but it’s unacceptable to not at least 
let cookie-less users know they’re missing out on the full iRock experience. 


Every user left out 
is one less customer, 
thafs unacceptable. 


O 


0 



+ 





Big 


JavaScti^t Broken coof^e 


The good news is that the browser has a boolean property you can check 
to see if cookies are available. The cookieEnabled property is part 
of the navigator object, which provides JavaScript with information 
about the browser itself. 


Cookies 

available ； 

li-Pc is 0ood- 


false 




6ook\cs avc〆 七 
available) 7 ou ^ ^ 
vcad ov ^r\it 
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exploring the client 


:^l|^rpei your pencil 


Write the missing code to check for cookie support in the 
greetUser () and touchRock () functions. Also add the 
missing code in touchRock () to let the user know that 
cookies aren’t available. 
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sharpen solution 


(^Jterpen your pencil 

Solution 


Write the missing code to check for cookie support in the 
greetUser () and touchRock () functions. Also add the 
missing code in touchRock () to let the user know that 
cookies aren’t available. 

I-P Cookie support is available) \read 七 he 


usev 灼 amc 


the iRodk Cookie- 


function greetUser() { 

i-P (havija*tov.dookicEir>olblcd) 

userName = readCookie("irock username"); 
if (userName) 

alert (’’Hello ’’ + userName + ，，，工 missed you 
else 

alert ( fHello , 工 am your pet rock. 1 )； 


function touchRock() { 

if (userName) { 

alert ("工 like the attention," - 
else { 

userName = prompt("What is your name? 
if (userName) { 

alert ("It is good to meet you, n + userName + M . n ) ； (-P Cookies av-c 

彳 , . ， ^ ^_ _ suppo\rtcd, the 

•4* (^avigatov.dookicE^ablcd) 4^usev- Cookie. 


userName 


• Thank you .’’） 


Enter your name here.") 


writeCookie (” irock—username’ ，， userName, 5 * 3 65); . 

else 

So\r\ry. Cookies avch supported/c^dbled m youv b\roY/scv. | y/o〆 七 ircrwcrwbcv you latcv/0; 

} Lc*t the usev- know -that -theiv- ladk o( 

Cookie suPPovt v/ill lirwrt the iRodk- 

document.getElementByld("rocklmg").src = "rock happy.png"; 

setTimeout ("document. getElementByld ( ' rocklmg 1 ) . src = 1 rock • png 1 ;，， , 

5 * 60 * 1000); 


Make m youv 

look like 

tW«s... *t^ itsi 七 Wmy out 
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ti 9 o 

Dumb Questi9ns 


exploring the client 


Can you check for client cookie support based upon the type of browser or 
the version of the browser? 

Browser detection is a slippery scripting slope that ultimately leads to unreliable 
results. You can’t really trust what browsers say about themselves when it comes to 
version information, which makes the navigator. cookieEnabled property 
the only truly reliable way to check for cookie support. 


Talk to the users... ifs better 
thaw wothiwg 

Although there’s no good way to simulate cookies when they 
aren’t available, gracefully breaking the bad news to the user 
is worth an awful lot in terms of user satisfaction. 



the useir is r^issihg ou-f： oh. 


Ala^s 

a 今 a m …办 汐 
coWttitd a ”。 伽 
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rockin with iRock 2.0 


Aw iRock fit for a JavaScript king 


You’ve really put some wear and tear on your JavaScript shoes stepping 
through all the code necessary for making the iRock a success. With 
a little help from the client, though, the iRock is now more real 
emotionally, has lost its sizing inconsistencies, and has even improved 
its memory! 


Browser metrics 
and CSS style 
properties 
give the iRock 
the ability to 
conform to its 
environment. 
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exploring the client 



JavaScPiptcross 

Take some time to sit back and give your right brain 
something to do. It’s your standard crossword; all of 
the solution words are from this chapter. 



Across 

5. One-thousandth of a second. 

7. I'm responsible for managing the list of cookies. 

8. A JavaScript mechanism that allows you to run code after a 
certain period of time has elapsed. 

10. A cookie has a name, a value, and an. 

11. Use one of these to store a piece of information on the client 
that you might need later. 

12. What you do when you reference external JavaScript code 
from a Web page. 


Down 

1. This kind of timer runs a piece of code repeatedly. 

2. This function allows you to create a one-shot timer. 

3. When data hangs around after a script finishes running, it is 

considered. 

4. When the browser window is resized, the.event is fired. 

6. Another name for a Web browser. 

9. Cookies are incapable of spreading these. 
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JavaScriptcross solution 



JavaScPiptcposs Solution 
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exploring the client 



V 嫩 


Fold the page vertically ▲⑽ Q JavaScript care aWt tke client? 

to line up the two brains J J 


and solve the riddle. 


I Vs a mcctmg o-f w\*mds| <r 




Tke client is wkere JavaScript code is run, 

wkicli means tkat JavaScript lives 
on tke trowser. Tliis is a positive 
tiling because it means tke server lias 
less to worry about，suck as storing cookies! 
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4 decision making 


If There’s a Fork in 


the Road，Take It 



Who can resist a man 
in uniform...but whom 


should I choose? 




Life is all about making decisions. Stop or go, shake or bake, plea bargain 
or go to trial... without the ability to make decisions, nothing would ever get done. It works 
the same in JavaScript — decisions allow scripts to decide between different possible 
outcomes. Decision-making drives the “story” of your scripts, and even the most 
mundane scripts involve a story of some sort. Do I trust what the user entered and book 
her a trip on a Sasquatch expedition? Or else do I double-check that maybe she really just 
wanted to ride a bus to Saskatchewan? The choice is yours to make! 


this is a new chapter 
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pick me pick me 


Lucky cowtcstawt come on down! 


On today’s episode of the thrilling new game show, Wanna Make a Deal, 
a lucky contestant is about to be chosen... 









W 句 


Although you’re no doubt on the edge of your seat 
in anticipation of Eric’s deal-making prowess, the 
real question is this: how did the game show host 
know to announce Eric as the lucky contestant? 
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decision making 


Choices are all about making a decision 

Duh, it’s written right there on his card! True, but you’re taking for granted the 
fact that the host can make a decision based on what name appears on the 
card. That’s because he’s human, and people excel at processing information 
and making decisions. If the host was a script, things wouldn’t be so easy. 



V"CSul*bs m 3 decision 
{jo tiioosc &ri 乙 . 


The question is really this: how does a script use a piece of information 
as the basis for taking an action? Knowing which name appears on a 
particular card is only half of the answer. The other half involves being 
able to evaluate the name on the card, and then choose the contestant 
with the matching name, in this case Eric. 
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if a decision is needed 


"if this is true... thew do something 

JavaScript is actually quite adept at processing information and making 
decisions, and one of the ways this happens is with the if statement. The 
if statement allows you to make simple decisions, conditionally running a 
piece of JavaScript code based upon a true/false test. 


If (true/false test) 


Do something; 


ihc icsi Ch d s 
up bcihg do 

soi^cthihg. 



If you look at the game show example through the lens of a JavaScript if 
statement, you end up with code like this: 


CKctks *bo see i-f ivjo 
av-c e<\ual cadK o-tiicv. 


if (chosenContestant == "Eric 


alert (’’Eric, come on down! 


TKc tvuc/-faUc -test is 
al^s plated bc*Uc ⑼ 
pav-c^*tV^cscs. 



10 scrwi^oloh this 
•isk /七 actually the tt\A 
o( the i-P sia-tcmcht. 


Tlieii statement 
is an excellent way 
to conctitionallv 
run a piece ol cocte. 
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decision making 


Aw if statement evaluates a 
condition... and then takes action 


Every i f statement sticks to the same format. You used 
this format already when you added cookies to iRock, but 
here’s the breakdown: 


/ _^ Thiy ode m£T Sorhchow 
/ cvalu3ic ^ 4lsc. 


□ 


l^deni -to make ihe todt 

easier ■(» vead. The ihdehied 
s-tatcmcht is pav-t <Jc -the u i-f/ 


There are a few things to keep in mind about the format of the if 
statement. First off, you can only run one piece of code, and it should 
appear indented just below if and the test condition. Although not 
strictly required, it’s a good idea to indent this code so that you can quickly 
see that it is part of your if statement. Here are the steps required to 
carry out a decision with an if statement: 

Enclose the true/false test condition in parentheses. 

❻ Indent the next line of code a couple of spaces. 

Write the code that gets run if the test condition is true. 



Match up these if statements with the actions that should go with them. 


if (hungry) 
if (countDown == 0) 

if (donutString.indexOf("dozen") != -1) 
if (testScore > 90) 
if (!guilty) 
if (winner) 

if (navigator.cookieEnabled) 


numDonuts *= 12; 

userName = readCookie( M irock_username M ) 
awardPrize(); 
goEat(); 

alert ("Houston, we have lift-off .’’）； 
alert (’’She's innocent! M )； 
grade = M A M ; 


you are here ► 


139 










exercise solution 



Match up these if statements with the decisive actions that go with them. 


*tvuc i*f tor>*ta'ms 

wovd w dozjCr> 


EoteRciSe 

§OLytiOH 


if (hungry) 


if (countDown 


if (donutString.indexOf("dozen") != -1) 


if (testScore > 90) 


if 


fuilty) 




numDonuts 


12 


if (winner) 


if (navigator.cookieEnabled) 


userName = readCookie("irock username") 


awardPrize(); 


goEat(); 

alert ("Houston, we have lift-off .’’） 


alert ("She ' s innocent !’'）； 


grade 


'A' 


/juilty NOT guil-ty, 
so juil-ty rwust be -false- 


*bv"uc i-f bv"oy/scv" C-ookics av"C 

enabled 


O 

o 


What the heck am I 
supposed to do IF there's 
more than one choice? 


Do this...or else. 

Just when you thought JavaScript had everything covered, 
something out of the ordinary appears. Actually, choosing 
between more than one outcome isn’t out of the ordinary 
at all... chocolate or vanilla, decaf or regular, it seems many 
choices actually involve one thing or another. That’s why the i f 
statement can be tweaked to allow for making a decision and then 

}\ —————一 


140 Chapter 4 

















decision making 


Use jf to choose between two things £ 

A twist on the if statement allows you to choose between two 
possible outcomes. Back at Wanna Make a Deal, Eric’s struggling to 
make a decision just like that. Presented with two alternatives, he 
must choose one or the other. 







Life is rarely as simple as choosing just one thing. The 
if statement gives us (and Eric) the ability to pick Case A 
or Case B. But how exactly does that look in JavaScript? 

if (chosenCase == "A") 
openCase("A"); 


Case A is Evid’s 
-Pi^rs-t option. 


if (true/false test) 

Do something; 
else 

Do something else; ^ 


• ^hd Case B is his 
op*tioh. 
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if more than one option 


multiple 

You can make decisions with if 

Using an if statement to take more than one action means turning it into 
an if/else statement, which gives you the option of running a different 
piece of code if the true/false test fails. It’s like saying if the test is true, 
run the first piece of code, and if not (else), run the other piece of code. 

if (chosenCase 
openCase("A") 
else 

openCase("B") 


Eric chooses Case B, which means the chosenCase variable will be 
“B.” So since the first test condition is false, that will trigger the if/else 
statement to run the else code. Unfortunately for Eric, Case B contains 
donuts, not the stack of money he was hoping for. 


Case B. 
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decision making 


Adding an else to your if statement 

The formatting of an if/else statement is very similar to the 
if statement. Just tack on the keyword else along with the 
other piece of code to run if the test condition is false: 


I if K Test condition 

I Statementl J + 


keyword else adds 

扣 other Co^sc of ^4- 



|-f *tWis »s -false, 
i\\\s Code is vw 


To add a second course of action to an if statement, follow these steps: 
o Place the keyword else after the first action statement, 
o Indent the next line of code a couple of spaces for readability. 

❺ Write the code that gets run if the test condition is false. 


there ^ are no o 

Dumb Questions 


Why isn’t there a semicolon after the parentheses in an 
if statement? 

The rule in JavaScript is that every statement must end with 
a semicolon, and the if statement is no exception. However, the 
if statement isn't just if ( Test Condition) , it’s also the 
code that gets executed if the condition is true. That code does end 
with a semicolon. So the if statement does end in a semicolon, if 
you understand what exactly constitutes an if statement. 

What happens when the test condition is false in an if 
statement that has no else clause? 


Nothing at all. In this case the value of the test condition literally 
results in no action being taken. 

Is it possible to use more than one else to choose 
between more than two possible outcomes? 

Yes. It’s certainly possible to structure an if/else statement 
to support more than two outcomes, but it isn’t as easy as just 
adding extra else clauses. You end up nesting entire if/else 
statements within each other, which can quickly get messy if you’re 
making a complex decision with lots of different outcomes. The if/ 
else approach isn't wrong, but JavaScript offers a better decision¬ 
making structure for this situation, the switch/case statement, 
which you learn about a bit later in this chapter. 
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Stick Figure Adventure 


Aw adventure of epic proportions 

Ellie’s writing an interactive adventure story called Stick Figure Adventure. 
Her project involves decision-making at every turn in the story, and she 
hopes JavaScript decision making may offer the solution to her problem of 
putting the adventure online for others to enjoy. 




SodiFHiurc 


^jelco^e to 

STICK FIGURE 
APVEWTURt 


C\iAeittier 
start ■- 


pi^^l CfaOCdC- 


1 


clbou*t "the 
twists 3hd tuirhs ih 

仏亡 bu*t wolrirics 
a l._ 七 "iblc dbou*(^ Kow *to 
… akc them a v^ality. 


usc\r with a web-based 
Icv-a^ivc sWy ; cxpchch^cd by 
卜。 id stuik -figuve. ’ 


I*m hoping JavaScript 
will give Stick Figure 
Adventure the 
interactivity it needs. 


O 


0 


Ellie wants the online Stick Figure Adventure to let the user 
navigate through a story by making one of two choices 
at each step along the way. You can follow along with the 
accompanying files available for download at http://www. 
headfirstlabs.com/ books/hjjs/. 
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decision making 


The adventure setup 


The Stick Figure Adventure story is a series of scene screens, where 
each scene is an image and a description. More importantly, each 
scene involves making a decision between one of two paths that 
move the story along to another scene. 

Each always pvcsch-ts 
c^ily -two dc^isiohs -fco 
advah 匕 e "the s-fcov 


Z av\d l have 
dc^isiohs that lead 

"to CVCh mov-c S^ChCS. 


Scene 2 




丁 is dlv/^ys 3 
S 匕 CM that \rcp\rcschts the USCV-S 
^u\r\rcht positioh ih the sio^y. 


Evcv-y sccv\c has a 

u^i^uc stCY\C ^umbev-. 


y our p enc ^ 


Write the code for an if/else statement that makes a decision for the first 


three scenes in Stick Figure Adventure. Hint: A variable named decision 
already stores the user’s choice, while the curScene variable will hold the 
resulting scene . 
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sharpen solution 


(^Sharpen your pencil 

Solution 


TV^ dc6'»s'»ov\ vav»ablc 
sWdk USCVS dc 如⑽ 

at av^Y 汐心 m - 
七 V^C stovY ， 6av\ DC 

c'l-bV^cv I OV 2.. 


Write the code for an if/else statement that makes a decision 
for the first three scenes in Stick Figure Adventure. Hint: A 
variable named decision already stores the user’s choice 
while the curScene variable will hold the resulting scene. 



i-f (dedisio 灼二二 I) 




丁 he du\rSdchc vaHable holds 
the du\r\rCht sUy\C, av\d ih 
七 his -the sdChC 

based upoh the usc\rs de^isioh 



斗外 io S^chc Z. 


Move *bo Stcnc ^>' 


Variables drive the story 

Let’s take a closer look at the two variables used in Stick Figure Adventure, 
which are critical in responding to user decisions and then moving the 
story along accordingly. 


r _ ■ 

decision 

The decision chosen by 
the user, which is always 
either 1 or 2. This decision 
determines the next scene in 
the story. 


curScene 

The current scene in the story, 
which is always a number 
matching a scene, as in Scene 
1， Scene 2, etc. 



The decision and curScene variables work together to store the 
user’s decision, and then use that decision as the basis for moving the story 
along. This process repeats itself from scene to scene as the story continues 
to unfold, all thanks to the if/else statement. 
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decision making 


Put part of the story is missing 


The if/else statement works great as the engine for the 
decision making part of Stick Figure Adventure, but the 
entire story isn’t getting told. Each scene involves both an 
image and a text description; both the image and text are 
displayed for a given scene as the story progresses. Changing 
the current scene number is sufficient to change the scene 
image but it doesn’t help with the scene description text. 



-pi U ” 

The 
匕 uvven 七 


TKc is suW'it'icyrt 

•to sc 七仏 c 
七 he 

wtams 払 c stM mJotr 


sfa_scene2.png 


document.getElementByld("sceneimg").sre 



Scene description 

You have arrived at 
a cute little house 
in the woods. M 


/\ imay is 
VCV"V similar *to a 

6\\r bu 七 PN 今 

is a widely 

s*ta^dav-d. 



,s ou-t bemuse 
: My a^io h is 

ih ^spohsc io 
dc6\s\oK 


scene 


curScene 


png' 


With the ability to only run a single piece of code in 
each part of the if/else statement, you’re limited to 
only one action. In other words, you can’t display an 
image and show a text description. 





How would you do more than one 
thing in response to a decision? 
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more than one thing 


Compounding your JavaScript efforts 


Ellie needs to be able to do more than one thing in each branch of if/else 
code. She needs to change both the scene number and the scene description 
text so that the following two lines of code can move the story along: 


document.getElementByld("sceneimg").sre 
alert(message); 


If 


scene 


Display sdcr>c dcstviftion message 
-Pov v\t^N sctr\t *to usev. 


The challenge is to do more than one thing even though JavaScript only 
allows you to run a single piece of code. The solution is a compound 
statement, which lets you frame a chunk of code so that it appears in the 
script as a single piece of code. Creating a compound statement, is done 
by surrounding the series of statements with curly braces ({ }). 


Change -the image 

"to the hewly dhosch s 匕 ehe. 


curScene + ".png"; 


Ah ha! A compound 
statement lets me treat 
a big chunk of code like 
ifs one piece of code. 


O 


doThis(); 

doThat (); = 3 statements 

doSomethingElse (); 


opChihg ahd 
^losihg bv-a^cs 
"to Ch^losc 

the dodc. 



doThis(); 
doThat (); 

doSomethingElse (); 


1 statement 


With one compound statement, it’s possible to build if/else statements 
that do more than one thing in each action branch: 



七 ㈣ i h ea^h at 

o( dh i-f 


0 
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theteicire no decision making 

Dumb Questi9ns 


How exactly does Stick Figure 
Adventure use variables to drive the 
story? 

At any given moment, the 
curScene variable contains the current 
scene number. Each scene shows a 
scene image and a scene description, and 
also presents the user with a decision 
allowing them to choose between one of 
two scenes. The decision variable 
contains the user’s scene decision, 1 or 2. 
When a choice is made, the value of the 
decision variable is used in conjunction 
with curScene to determine the new 
scene. More specifically, the scene image 
is changed using the value in curScene, 
and the scene description message is 
displayed using an alert box. 


Why does it matter that a 
compound statement crunches multiple 
statements into one? 

It matters because many parts of the 
JavaScript language are structured around 
the idea of a single statement. It's kind of 
like how an airline allows you exactly two 
carry-on items. Nothing prevents you from 
stuffing a bunch of stuff into those two 
carry-ons as long as you stick with just the 
two. So compound statements are like a 
piece of carry-on luggage in that they allow 
you to stuff multiple statements into a single 
“container” that is perceived as a single 
statement to the rest of the script. 


Why don’t compound statements 
end in a semicolon? 

Semicolons are reserved for individual 
statements, not compound statements. So 
single statements that appear within a 
compound statement must have the trailing 
semicolon but the compound statement itself 
does not. 

Is a function a compound 
statement? 

Good question! And the answer is 
yes. You might have noticed that code in a 
function is surrounded by curly braces. For 
now you can think of a function as a big 
compound statement that you can pass data 
into and out of. 


^^rpen your pencil 


Rewrite the code for the first if/else decision in Stick Figure 
Adventure. This time, use compound statements to set both the 
scene number and the scene description message. 
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sharpen solution 


(^Jterpen your pencil 

Solution 


丁 he duvv-ch-t s^he 
i^umbcir is adjusted 
based upoh "the 
dc^isioh made by the 


Rewrite the code for the first if/else decision in Stick Figure 
Adventure. This time, use compound statements to set both the 
scene number and the scene description message. 


USCV-. 


i-f (decision 二二 I) { 


乙 u\rS 如 e 二 2>; 


TKc stcy\C dcs£.v'»\>*t'ioy\ message — w You have dvViv/ed a*t d du*tc house *m woods ”； 

message is sc*t *to ― J 

y\cw stene. J. 


S*tav-*t *tVic tompour\d 
s*ta*tcw'Cir\*t 
ofCr\ur\^ £.uv*ly bv*36c- 

Its a jood idea "to 
mdcirt the CoAt 

>wi*UV_h a dompou 妁 cl 
st3"tcinr»C 灼 t 



else { 

匕 u\rS 乙 cne 二 3; 

essay — w y^u av-c s*ta^d*mg oy\ -the bv-ido^c overlooking a pcadc-ful s-tv-cam. 


^.Y\d -tV^C domfouv^d 
s*ta*tew^ 七…狀 a 
dlosm^ 6 UVI 7 Wa 6 C. 


A di-Pfc\TCht sdChC dcsdHptioh 

message is set -fo\r S^hc 3. 


BULLET POINTS - 

■ Use the if statement to conditionally run a single piece 
of JavaScript code. 

■ The test condition in an if statement must always 
result in true or false. 

■ Use the if/else statement to conditionally run one of 
two different pieces of JavaScript code. 


Use a compound statement to run multiple pieces of 
JavaScript code in place of a single piece of code. 

Create a compound statement by surrounding multiple 
individual statements with curly braces ({})■ 

Compound statements allow the action parts of if and 
if/else statements to do more than one thing. 
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The adventure begins 


A few compound statements combined with an if/else 
decision have turned Stick Figure Adventure into the 
beginnings of an interactive online story. It’s well on its way 
to becoming a fully-functioning online adventure! 


/. 



dcs^Hp-tioh text is 
displayed \v\ sy\ alc\rt box. 


I dhooscs 
Pcd'is'ioir> l> 
leads *tV>c usev *to 

Z- 


产 


♦ 


Butto 灼 2 - dhooscs 

Pcdisio^ 2 -, whidh 
leads *thc usev *to 
Sd ⑶ c 孓 



Stcnc 2-. 



® biiMt 



令 


i 




i 




m u 


命 





SdChC 1> 





令 
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roots of the decision tree 


Awd wow, the rest of the adventure 


A single decision hardly makes for an interesting interactive story. But Ellie 
has plans, including several more scenes that make Stick Figure Adventure 
considerably more intriguing. Together, these scenes make up a decision 
tree that you can use to chart the different paths through the story. 


Scene 2 


The title leads -to 
S 匕⑽ I \rcga\rdlcss o( whidh 
dc^isioh the usc\r chooses. 



Kousc *m 
Y/Oods 


Take the path. 


Take the bridge. 


The -title sderte sev-ves 

3s dh nvbrodud"tio 灼 "feo 

Sti 匕 k Fi^uv-c Advc^-tuv-c. 



In addition to adding more scenes to the story with new twists and turns, 
Ellie has also created a new introductory title scene that appears before 
the first scene in the story (Scene 1). The title scene (Scene 0) is unique 
in that it leads to Scene 1 regardless of whether you choose Decision 1 
or Decision 2. In other words, Scene 0 is not a branch in the story, but 
instead just the opening credits. The new scenes and openers are ready for 
you to download at http:/ / www.headfirstlabs.com/books/hjjs/. 
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Scene 4 


Scene 8 



These a\rc 
dead c^ds-.liicv-ally/ 


Scene 6 


These dc^isiohs lead ba^k 
io s-fcovy-chdihg sdehes. 






♦ 




m 


♦ 


，■令 


% 






♦ 


♦ 


令 


♦ 


% 


矯 


矯 


% 




_ ■ 


命 


What would the Stick Figure Adventure decision tree look like just using if/else statements? 


you are here ► 


153 



















I don’t know ...it depends 


Tiered decision making with if/dsc 


Even though each decision within the Stick Figure Adventure decision tree 
only has two options, Ellie realizes that later decisions are dependent upon 
earlier ones. For example, to get to Scene 5 from the beginning of the 
story, the user must follow a specific path: 


If (curScene is 2) 

If (decision is 1) 
Jump to Scene 4 
Else 




Just knowing the option chosen by the user isn’t enough information to 
decide what scene is next. She needs to factor in the current scene. One 
solution is to use multiple if/else statements in such a way that you 
first check the current scene, and then take action based upon the user’s 
decision. But this tiered decision-making approach involves an if within 
an if... a seemingly strange proposition. 

That is, until you consider that we make tiered decisions all the time. Have 
you ever answered the question, “would you like fries with that?” This 
question rarely follows an order for a salad, the question is based upon an 
answer you’ve already provided, such as, “I’ll have a cheeseburger.” This 
is a tiered decision because later questions (fries?) are dependent upon the 
answers to earlier questions (cheeseburger or salad?). 
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Aw if can go inside another if 


It’s perfectly legal to place an if within 
an if in JavaScript. Remember, an if 
statement is still just a statement, just 
being used as the action part of another 
if. In other words, it’s OK to follow-up 
one question with another question. An 
if within another if is known as a 
nested if statement. 



T"he nested i-P 

statcrhCh-ts ohly 
Corrxt ih-to play 
i-P the ou tc\r i-p 
statcrhChts 3\rc tv-uc 



if (order == "cheeseburger") 
if (wantFries) 

order += n fries"; 


else if (order — 

: (wantFruit) 
order += " fruit 


salad") { 


T 


A «\ui6ke\r way -to say ov-dev- — ov-dev + ... 
so 七 ha 七七 he is s^ldd dhd *(Vui 七 OV" 

^hccscbuvgcv a^d -fvics. 


Write the decision-making code for Scene 0 and Scene 1 of Stick 
Figure Adventure, making sure to use nested if and if/else 
statements when necessary. 
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sharpen solution 



nested i-f/else 
handles 
■tlic usev^s dtt\s\ov\ 
-fov Stci^c I- 


Write the decision-making code for Scene 0 and Scene 1 of Stick 
Figure Adventure, making sure to use nested if and if/else 
statements when necessary. 



— Z ； 

message — W Y® U av-v-ived a*t a du*tc little house'm woods. 



Ihdc^-taiio^ helps you -fco 
v/hi^h s-tatcmc^is av-c 
^cs-ted wilhm o*thc\rs. 


I 七 is c^tv-cmcly iw>fov-*t3r\*b 
•to £.avc-fully ma*b^ 

3y\d tlos'mj bv-a^cs. 
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Your functions control your pages 


A pair of buttons (“1” and “2”）on the Stick Figure Adventure web page 
is how users move through the story. When they decide to click one of 
the buttons, the changescene () function is called to change the scene 
based upon the decision button that was clicked. 










function changeScene(option) 



i 


</script> 

</head> 

<body> 

<d ir m r= e =、 argin-tOP:100pX; reenters 

e -png alt= ,, Stick Figure Adv 七 ture" /><br 

’’decisionl 
' , decision2 


sre: 


<img id="scene:img 
Please choose: 

〈input typ e ="button" id 
〈input t y p e ="button" id 
</div> 

</body> 

</html> 


’> 


value=’’l" onclick= ,, changeScene (1) r, J/> 
value="2" onclick= ,, changeScene (2^^/> 


(“1” or “2”）as its only argument. This piece of information 
is all the function needs to change the scene. Specifically the 
changeScene () function handles three things: 


o 


Set the curScene variable to the new scene number. 


T\)t fay hs *Uo 
Wttons avc used *to 

七 he s*tovy- 


❻ 

❺ 


Set the message variable to the new scene description text. 


Change the scene image based upon the value of 
curScene, and display the scene description text message. 
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pseudo what? 


Pseudocode lets you map out your adventure 

Ellie has a pretty good general idea of how to build the changeS cene () function to 
implement the Stick Figure Adventure decision tree with JavaScript code. But, the sheer 
number of decisions can make it a confusing proposition once the coding begins. Sometimes, 
it’s helpful to first write the decision tree in pseudocode, which is a casual, more readable, and 
also very unofficial way of expressing scripting code. Once the pseudocode is knocked out, 
the real JavaScript code will be much clearer and less error-prone to write. 



EaA -tof-lcvcl 
• ， - f/clsc 

v-cpv-cscy\*bs a 


If (curScene is 0) <： — 
Jump to Scene 1 
Set Scene 1 message 






Jump to Scene 3 




tKereicire no o 

Dumb Questions 


Pseudocode looks a lot like JavaScript code. Why bother? 

You don’t have to bother, but the idea is to simplify the process 
of converting a complex tree of logic into JavaScript code, and at 
the same time minimize the risk of making errors. Since pseudocode 
doesn’t have the same level of detail of JavaScript code, you can 
focus your efforts more on the logic of how one scene leads to 
another, as opposed to making sure every curly brace and semicolon 
is in the right spot. Once you're comfortable with the pseudocode, 
translating it into JavaScript code is fairly automatic. 


Do you have to use curly braces when nesting if 
statements? 

No. In fact, if you're only nesting a single if statement within 
another if statement with no other code, it can be simpler to leave 
the curly braces off since you technically don’t need a compound 
statement. However, in a complex nesting of if statements, it can 
be advantageous to use curly braces even when not strictly needed 
just to make the nesting clearer. 
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JavaScript Magnets 


The changeScene () function for Stick Figure Adventure is missing a few pieces of code. Use 
the magnets to finish the missing code from the scene diagram on page 152. Note that not all 
of the scene decision code is shown — a few scenes have been left out intentionally. 


function. changeScene (option) 
var message = 


.(curScene == 0) 

curScene = 


message 


Your journey begins at a fork in the road., 


.(curScene == 3) { 

(option —— 1) { 

CUrSCenS = „ 3 ； r ； v ； a troll lives on the other side of the bridge and you 
message = Sorry, a 丄丄丄丄 

"just became his lunch. n ; 


curScene 


message = "Your^ stare is interrupted by the arrival of a huge troll ."； 


(curScene == 4) 
if (option : 1) { 

curScene = •， 


curScene 
message : 


Sorry, you became part of the witch’s stew."; 


document•getElementByld("sceneimg 
alert(message); 


”） .src = "scene" + curScene + ’ 、 png n ; 


1 


5 


if 


else ■ else 




else 


8 


else 
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JavaScript magnets solution 
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&omg on a stick figure adventure 


The Stick Figure Adventure script now reflects the entire 
decision tree, allowing you to navigate through the story 


along several different paths. Here’s one of them: 


STICK FIGURE 

adventure 



flick eiiher 
to 





-U-2 


0. 
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drawing a blank 


Stick figure inequality 


Unfortunately，Ellie is already encountering a problem with Stick Figure 
Adventure. After releasing the page to a few friends for testing, a few of 
them have reported a strange window that displays an empty message. 
The “ghost window” is isolated to when a new adventure is started 
after ending a previous one. So the problem is somehow associated with 
moving to Scene 0 from some other scene. 






WdcciNve 士。 

STICK FIGURE 

ADVE^™ nr 


今 hos 七 y/mdoy/ 

y\o messay a 七 all? 



As it turns out, there’s only two scenes that have a path back to Scene 0: 
Scene 5 and Scene 6. These two scenes lead back to Scene 0 because they 
represent endings to the story, so it makes sense to start over at the beginning 
once the story ends. So Ellie isolates the code in the changeScene () 
function that handles changing from these two scenes back to Scene 0: 


else if (curScene 


5) 



^ ^ bo*th set "the 

variable but do 

■fco -the message variable- 


Although nothing obvious jumps out in such simple code, take another 
look at the code at the bottom of the changes cene () function 
that takes care of changing the scene image and displaying the scene 
description text. 


The empty alert box is 
confusing, rd rather it 
just do nothing. 


O 


o 


document.getElementByld("sceneimg").sre 
alert(message); 


II 


scene 


curScene 


• png' 


Display dcsdvip*tior\ 七 wb • • 

y/hi^K is s-toved *m *bKc message vav-iablc- 
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!- Psst IVe got wothiwg to tell you... 

The problem with the Stick Figure Adventure code is that it always 
displays an alert box with the scene description message, even when 
there’s no message to display, like with Scene 0 when restarting an 
adventure. But how can you check to see if the message variable 
actually contains scene description text? 



v\ttd a way -to make 
suv-c -tiic alcv-t bo% is 
v\oi displayed 
message vav-iabic is cmf-by. 


This is t\ruc -Po\r a^y 攻 he 
othc\r thah ^>. 


The solution involves checking the message variable for empty text (’▼ ’▼) 
before displaying the alert box. Or to put it another way, only display the 
alert box if the message variable is not equal to an empty string. Granted, 
that seems like a backwards way of solving the problem, but remember 
that you’re trying to come up with a true/false test for when it’s OK to 
display the alert box. 

Just as the equality operator (==) allows you to check if two items are the 
same, the inequality (! =) operator checks to see if two items are different. 


if (curScene != 6) 

alert("Thankfully, you haven't been eaten by the troll .")； 




Rewrite the code that displays the Stick Figure Adventure scene 
description message in an alert box, but this time make sure it 
only displays the alert box if the message actually has text data. 
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making true/false comparisons 

- ^terpen your pencil 

Solution 


TK'is »s *brue ov\Yj i-f 
message toy\*ba'ms d 
峰- 〜切 st— 



Rewrite the code that displays the Stick Figure Adventure scene 
description message in an alert box, but this time make sure it 
only displays the alert box if the message actually has text data. 


i-f (i 


»cssajc 






Craftiwg decisions with comparison operators 


Equality and inequality aren’t the only comparison operators you’re likely to 
find useful as you continue building test conditions and making decisions in your 
JavaScript code. 


Equality 


X 


y 



T\ruc i-P y. EQUALS 
y ； othcirY/isc -false 


Inequality 


X 


!= y 


less thaw 

x < y 


Tvuc i-f ^ >s UNEQUAL TO 

y, o*tKcv>wisc -false 


Tv-uc % *.s GREATER THAN 

y, o*tV>cv-wisc -false 



Greater than 



X > y 


T\ruc i-f % is LESS THAN 
y ， othcv-wisc -false 


Negation 


Less thaw or equal to 


Greater thaw or equal to 



False i-P x is tv-uc, 

t\ruc i-p x is -Palsc. 


X <= y 

True 』 “ LESS THAN OR 
t6^UAL TO y, oihcrY/'isc 


x >= y 

T\ruc i-f % is GREATER THAW OR 
TO y, othcv-wisc -false 


JavaScript operators, such as these 
comparison operators, are used 
to build expressions, which are 
chunks of JavaScript code that are 
somehow combined into a single value. 
Expressions made out of comparison 
operators have a boolean (true/false) 
result, which makes them handy for 
constructing decision making logic using 
if/else statements. 



=and == are very different animals. 

Make sure that when you intend to 
compare two values for equality you use == 
not =. Otherwise, you’ll end up assigning 
one of the values and potentially creating 
all kinds of new and unusual bugs. 
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Dumb Questions 


decision making 


Why does the negation operator only use a single value? 

While most comparison operators require two operands, the 
negation operator requires only one. And its job is very simple: 
reverse the value of the operand. So, true becomes false and 
false become true. 

I’ve seen the negation operator used on a value that isn’t 
a comparison. How does that work? 

Code that uses the negation operator on a non-comparison 
value is taking advantage of a detail regarding how JavaScript 
determines the “truthiness” of a value. If you use a non-comparison 


value in a situation where a comparison is expected, any value other 
than null, 0, or n n will be automatically interpreted as true. In 
other words, the presence of data is considered a true value from 
a comparison perspective. So, when you see the negation operator 
used on a non-comparison value, null, 0, and are negated to 
true, while all other values are negated to false. 

Hang on, what’s null? 

null is a special JavaScript value that represents the 
absence of data. It makes more sense in the context of objects, 
which are covered in Chapters 9 and 10. 




ExefictSe 


This code is capable of displaying a positive message about Stick Figure Adventure. What 
values should the four values a, b, c, and d have to successfully complete the message? 



a = 
b = 
c = 
d = 
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exercise solution 


This code is capable of displaying a positive message about Stick Figure Adventure. What 
values should the four values a, b, c, and d have to successfully complete the message? 



a 


b 


c 


d 


10 


IQ 




-false 


a must be false so -tKa-b !d is W- d 

£.ould 3lso be ywa\\) O) ) oV" 

cw»f*by (uhde-fmed)) m >/KitK dasc fd Will 

still be *brue. 

The positive message 

WC wc\rc looking -fov-. 



Comments, placeholders, and documentation 

Stick Figure adventure is a good example of a script that has unfinished chunks 
of code because the story is still being developed. For example, Scenes 8 and 9 
are both “to be continued” scenes still awaiting some creative work from Ellie. 

It can be helpful to flag unfinished areas of code with placeholder notes so that 

you don’t forget to fill in the details later. JavaScript comments make it possible 

to add notes to code without affecting how the code runs in any way. The 匕 

// ^L- m Comment 


A tomme 妁七 stav-*b 

o^* *(*ov*v/3v*d sldsiics. 


be ahythihg you wa " 七 
- _七 a" gets ighoved by the 
JavaSd\rip-t ihtc\rpv-ctcv-. 
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Comments m JavaScript start with // 

A comment created with / / extends from the slashes to the end of the line 
To create a comment as a placeholder, just follow the slashes with a note 
indicating that more code is coming. 


TKcsc ImCS 
of todt av-c 
i^ov-cd by 
m-tcv-pv-c-tcv- 



else if (curScene == 8) { 

// TO BE CONTINUED 


else if (curScene == 9) { 

// TO BE CONTINUED 


Comments aren’t just for placeholders. They’re more commonly used to 
document code so that it’s better organized and easier to understand. Just 
because you know how a piece of code works now doesn’t mean you’ll 
have such a great memory about it later. And there’s always the chance 
someone else will inherit your code, and they’ll certainly benefit from 
notes about how it works. 



丁 his 

c^plaihs -the viable 


var curScene 


0; 



The initialization of the curScene variable in Stick Figure Adventure 
is clearer thanks to a detailed comment. A similar comment could be 
used to clarify the initialization of the message variable. 

// Clear the scene message 
var message =""; 



Ay’nrv a dommerrt 
dlav-i-f ics is ov\ 

•m CoAt it 


If you need a comment that spans more than one line, you can 
create a multiline comment. 

a,wa y s wi-th /^T 


Single-line comments 
start witli //， wkile 
multiline comments 
are enclosect tetween 

/" and V. 



/Vlultil'mc tommcyrb 
ad …狀氺 


A multiline comment can be as long as you want, 
you just have to start it with / * and end it with * / . 

/* All three of these lines of code are one 
big comment. Seriously, I'm not kidding. 

No joke, this is still part of the comment. 
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now where did I put that variable? 


Hang on a second. The 
comments make sense but I doiVt 
get why the curScene and message 
variables are created in different places. 
Whafs the deal with that? 


O 


is dvcatcd 



message is dv-caicd 
oy \ 七 he inside o-f -the 


Location, location, location of variables 

As with real estate, location means everything in JavaScript. In this case, the 
place where the Stick Figure Adventure variables are created matters a lot. 

In other words, it’s no accident that curScene is created outside of the 
changeScene () function, while message is created inside the function. The 
reason is because of scope, which controls the life cycle of a variable, as well as 
what code can access it. 
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Scope and context: where data lives 


In JavaScript, scope refers to the context of data, as in where data lives 
and how it can be accessed. Depending upon its scope, some data can be 
seen everywhere in a script, while other data is limited to a specific block of 
code, such as a function. This an example of two variables who live in very 


different places: 



global variable, visible 
-bo stvift- 


Lodal visible 

only wi-thm the -Puh^tioh. 


In this code, x is considered a global variable since it’s created outside 
of any function or other block of code, and therefore can be seen by the 
entire script. More importantly, x is “alive” for as long as the script is 
running. Unlike x, y is a local variable whose visibility is confined to the 
code within the doSomething () function. Also, y only exists while the 
doSomething () function is running — it gets created when the function 
starts, and then destroyed when the function finishes. 


So far so good, but where does that leave z, the argument to the 
doSomething () function? As it turns out, function arguments act just 


global variables art 
dv~our\d -fov 

Cn*t»V*C o-f 3 sdvift- 



like local variables that have already been initialized. So z has the same 
scope as y, meaning it can only be accessed from within the function. 

Local vav-iablcs avc 

3hd des-tv-oyed as 
by "thci\r sdopc. 


Data visibility is on a “need to know” basis, meaning you should limit 
accessibility whenever possible. This helps prevent data from getting 
inadvertently changed by code that has no business accessing it. In practical 
terms, this means you should use local variables whenever possible. 






〆 





How could global and local variables fit into the Stick Figure Adventure code? 
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adventures of variable locations 


Check your adventure variable score 

Looking back at the Stick Figure Adventure variables with the knowledge 
of local and global variables, it’s now possible to get a better feel for why the 
variables are created in different places. 


Tiic value o-f 
message vaviablc is vese 七 
eaA iiw'C 七 he 

so i*t y/ovks -f me 3s d 
lo^dl vav-iablc- 


The value 

duvSd ⑽ vaviablc mus 七 
be md'mia'rned m brbw ⑽ 
tails *to 七 lie di^ar>^c£tcr>cO 
-fur>d*tio^ so i*t has *to be 
a global vaviablc- 


〈 script■type="text/javascript”> 

// Initialize the current ^ 。 „ 

var curScene = 0; _ Scene 0 (Intro) 

fu ^ tion changeScene (decision) 

/ Clear the scene message 

var message = 11 

if (curScene == 0) 
cujtSCG nG = ]_ • 

} =，，Y ° Ur j ° Urne Y ^ gi ns at a fork in the roa 

else if (curScene == l) | 
if (decision == l)( 
curScene = 2 

} =，，Y ° U arrived at a cute little ...-； 

else { 

CUPS CGHG = 3 } 

} =，，You are standing on the bridge ...-； 


else if (curScene 


2 ) 


</script> 


The issue here is the need to preserve the value of a variable outside the 
scope of the changeScene () function. The message variable is 
cleared at the beginning of the function, so its value doesn’t have to be 
preserved outside of the function. The curScene variable, on the other 
hand, is checked in several if/else test conditions, so this value has to 
persist in between calls to the function. Bottom line，message can be 
created locally but curScene has to be global in this example. 
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Where does my data live? 



There is only one global scope for creating global 
variables, and everything else is local. Anything 
created at the global level can be seen by the 
entire script, while local data can only be seen and 
used within its limited scope. 


If scope still has you a little puzzled, it may help to think of different 
parts of a script as self-contained areas where data can live. For 
example, the Stick Figure Adventure script has several different 
scopes that you could use to store away data. 


global 






Lota\ 

*to 七 he 


m ©ssage 


Lo 匕 al 


v c»\riablc. 


global, 0 \r s<tv-ip*t 
level ， s 匕 ope. 


: script type="text/javascript" 


function changeSceneQ { 


if (curScene == 0) { 


else if (curScene 




else if (curScene == 2) { 


Lotal stopc -to 
di-P-fcv-cr\*t tompouir\d 

_ tWeiqre no ^ _ 

Dumb Questions 

I have some data. Which type of variable should I use to store it: local or global? 

The way you’re using the data will determine whether it needs to be local or global. But 
since you asked, the general rule is to try to make all variables local, and only resort to global 
if local won’t work. 
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local and global variable face off 


Fireside Chats 



Tonight’s talk ： Local variable and Global variable discuss the 
importance of location when finding a home for data 


Local variable: 

I find it helpful to focus only on what’s going on 
around me. In fact, I couldn’t even tell you what’s 
happening outside of the neighborhood where I live, 
and I quite like it that way. 


While that sounds tempting, I like the security of 
comfortable surroundings. I rest easy knowing that 
no one from outside of my little area can get to me. 


Ouch! I’m not sure I believe in all this reincarnation 
business, but I can tell you that I’m every bit as 
handy for storing data as you are. I just don’t put 
myself out there for everyone to see. 


And when a script needs to keep some information 
private to a certain section of code, it comes to me 
because of my knack for discretion. 


And that’s why people still find us both useful. 


Global variable: 


Dude, you really need to expand your world view. 
Get out and travel a little, check out other parts of 
the script universe. 


Maybe so, but are you aware of the fact that you’re 
little life is meaningless in the grand script scheme 
of things. You get created and destroyed over and 
over every time your little world comes and goes, 
while I’m here for the long haul. If the script is here, 
I’m here. 


That’s fair. And I’ll admit that I’ve been abused and 
misused a time or two, but the upside of me always 
holding my value through thick and thin has been 
enough to offset the problems. When a script needs 
a piece of data that remembers its value and is 
available everywhere, they come to me. 


Sounds great, but I’ll take accessibility and 
persistence over privacy any day. 
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What happens if actual JavaScript 
code is placed within a comment? 

Nothing! Comments are completely 
ignored by the JavaScript interpreter, so 
anything you place within a comment is 
overlooked when the interpreter starts 
running script code. Knowing this, comments 
can be used as a means of temporarily 
disabling pieces of code when trying to track 
down a problem or trying different coding 
approaches. 

Can a line of JavaScript code have 
a single-line comment at the end? 

Yes. And in this case, the code is still 
run because it isn’t part of the comment. A 
single-line comment doesn't necessarily take 
up an entire line—the comment is just from 
the / / to the end of the line. So if the / / 
follows a piece of code, the code will still run 
just fine. 


Why don’t comments end with a 
semicolon? 

Because they are not JavaScript 
statements. Comments are labels that do 
nothing more than describe or provide 
additional information about code, sort of 
like footnotes in a book. The main thing to 
remember is that the JavaScript interpreter 
ignores all comments—comments are there 
for the human brain, not JavaScript. 

What does “script level” mean in 
regard to creating global variables? 

“Script level” is the top level of script 
code, which is just inside the <script> 
tag. The significance of “script level" is that 
it is outside of any function or other block 
of code, and therefore anything created at 
"script level" is considered global. This means 
anything created at “script level" lives for the 
life of the script and can be accessed by any 
code within the page. 


If I create a variable inside of 
a compound statement, is it a local 
variable? 

Maybe. The current version of 
JavaScript (1.7) doesn’t support true local 
scope for variables. Instead, it supports 
function scope, which means variables 
within a given function are considered local 
variables to that function. But just sticking 
a variable inside of a compound statement 
doesn’t automatically make it a local variable, 
although a future version of JavaScript will 
likely remedy this situation. The easy way to 
remember it is that variables created inside of 
a function are local, while all others are global. 

Scope, flow, execution... this local 
and global variable stuff sounds really 
complex. Is it as hard as it sounds? 

Not really. The main thing to remember 
is that local variables are perfect for storing 
temporary information that you don’t need 
to remember outside of a function or other 
chunk of code. If you need the data to 
stay around for the entire life of the script, 
then you should make it a global variable. 
Surprisingly enough, most script data tends 
to be more temporary than you might initially 
think, meaning that you will likely use local 
variables a lot more than global variables. 


Local variables store temporary 
information，global variables are stored 
lor tke ]i|e oi tke script. 




BULLET POINTS 


Comments are a great way to remind yourself of code 
to add later. 

Don’t be afraid to use lots of comments to document 
your code so that it’s easier to understand. 

Use a pair of forward slashes (//) to start a single-line 
comment. 

Multiline comments start with /* and end with */. 


Global variables are created at the script level, outside 
of any function or other body of code, and are kept 
around for the life of the script. 

Local variables are created (and destroyed) inside a 
body of code, and can only be accessed within that 
code. 

Local variables are preferred over global variables 
because their access is more tightly controlled. 


you are here ► 


173 








choices abound 


Choice of five 

Remember Eric, our game show contestant from earlier 
in the chapter? It seems Eric has polished off his donuts 
and progressed to a later round of Wanna Make a Deal? 
Problem is, he now faces a very challenging decision... 
he must choose between one of five options. 



L 






How would you code a JavaScript decision 
involving five different options? 
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CouldiVt you just use a bunch of 
nested if/else statements to 
choose between five things? 



Choice of five 

Good idea! Although the if/else statement is geared toward 
making a decision between one of two things, several of them can 
be nested together to choose between as many things as you want. 


“s Code >wov-ks bu*t las-t 
—w cvc^ry 七 以七 -to 

: evaludiedi) v/WA is 


if (chosenCase = 
openCase("A"); 


A") 


else if (chosenCase 
openCase("B"); 
else if (chosenCase 
openCase("C"); 
else if (chosenCase 
openCase("D"); 
else if (chosenCase 
openCase("E"); 


B n ) 


C' 


D") 


E 


Nesting if/dsc can get complicated 

The nested if/ else statements work just fine... but they aren’t 
all that efficient, primarily because they aren’t really designed 
for decision-making that involves more than two possibilities. To 
see why, work through how many boolean tests take place in the 
process of choosing the last case, Case E. All five test conditions 
are evaluated, which is a bit inefficient. 
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wishing, and hoping, and choosing 



Wouldn t it be dreamy if you 
could choose between more than two 
things without having to use all those 
inefficient if/else statements? 


r 
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Switch statements have multiple cases 

JavaScript has a decision-making statement just for making multiple choice 
decisions. Unlike the if/else statement, which is really better suited to 
choosing between two things, the switch/case statement allows you to 
more efficiently choose between any number of things. Let’s look at Eric’s 
dilemma through the eyes of a switch/case statement: 


Tlicm 
swi-tdh/dasc has \ 

hothihg -fco do 

meial tases. 


switch (chosenCase) { 
case "A" : 


break 



»s Codtd 
statement 


openCase("E") 


Tke switcli/case 
statement elliciently 
ckooses between more 
tkan two tkings. 



The vdluc o-f &rid’s ddse is 

"the do^iiroHmj piede o-f nvfov^aticm 
’m the sy/iidh/ 匕 ase sia 七 emerrt. 



Ti^c ad*tior> dodc is f>ld£>cd 
immcdia-tcly bcloy/ its 
tasc 




y hc r kcak is … 聊 y 

f° “A 灿 d^isioh bv^h 
by ^^edi^cly exiting ^ ^ 

⑶七咐 swi^h/^asc siai^i 


The sy/*i*tdV >/case s*ta 七咖⑼七 
•is s*brud 七 uved ds a b ’13 

乙 omfou 灼 d 



E 站 ftdSe 


Fact or fiction? The switch/case statement can do anything the if/else statement can do. 


Fact 


Fiction 
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switching things up 



Fact or fiction? The switch/case statement can do anything the if/else statement can do. 


Fact 


〜 Fic 


ction 


Unlike if/else, the test data that controls 
a switch/case statement cannot be an 
expression—it must simply be a piece of data. 


Inside the switch statement 

Now that you’ve seen a switch/case statement in action, let’s break it down 
and look at the general format for the statement. 





EatK dctisio^ 
braW s-tav-b 

key^ovd, -follov/cd 






optional U dc-fault w 
CoAt 

"to be v*uh i-P 
else rw^-t^hes. 


□ 


□ □ 


丁 he *bcs*b da*t3 wus*b kc 
a p\cdc 灼 0 七办 

cy.pvcss\ov\—3v\d »*b docs K 

evaluate bo <>r +aUc. 



rh3"tdli (hds y/i"tK 
a \rcgula\r doloh, NOT 
3 scrwi^oloh. 


TV^c bvedk s*ta*t^er\*t fv-cvc^*b 
Code. -fo\r o*t^cv dc£.isior\ 
bvar^es -fvom vuh 



丁 he Chti\rc body o( the 
statcrwCh-t is wv-apped up 
withih du\rly bv-a^cs. 
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Switch case statements: write your own 


Creating a switch/case statement is admittedly more involved than 
creating an if/else statement, but it is much more efficient for dealing 
with more than two possible outcomes. This is the process: 



Enclose the test data in parentheses and open the 
compound statement ({). 


O 

❺ 

❹ 

❺ 

o 


Write the case match followed by a colon ( : ). 

Write the code that gets run if there is a match. This 
can be multiple lines of code — there is no need for a 
compound statement. 

Add a break statement — don’t forget the semicolon (; )• 

Optionally include a default branch for when there 
is no match. 

Close the compound statement (}). 


I wonder if a switch-case 
statement could be used 
to make Stick Figure 
Adventure more efficient. 


o 


tJiereiare no o 

Dumb Questi9ns 


So a switch/case statement doesn’t 
make a decision using a true/false expression? 

That’s correct. Unlike an if or if/else 
statement, switch/case uses a piece of test 
data to make its decisions. That’s how it supports 
more than two outcomes. 


So each case match is just a match on 
the test data? 

Yes. The idea is that you use a variable as 
the test data, and then use literal values to carry 
out each different match. 

What happens if you leave out all the 
break statements in a switch/case? 

Unexpected results can occur. The break 
statements serve as dividers between each section 
of action code in a switch/case statement. 
Without them, all of the action code would run 
as one big chunk, which would defeat the whole 
purpose of making different decisions. When a 
match is made in a switch/case statement, 
the code below the matching case is run until it 
encounters a break statement. Only then does 
the switch/case statement exit. 



Watch it! 


Break for 
safety. 

Prevent 
accidental code 
from getting run 
by always finishing off each 
switch-case match with a 
break statement. 
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switch exposed 



Switch Bxposci 

This week’s interview: 

Mover, shaker, decision maker 


Head First: Glad you’re willing to chat with us. So, 
in one word tell us how you would describe yourself. 

Switch： Choosy. 

Head First： Care to elaborate? 

Switch： I make it possible to choose between lots 
of different things. Although some situations involve 
simple black and white decisions, there are plenty of 
situations that require, let’s say, more nuance. That’s 
where I come in. 

Head First： But people say that If can do the same 
kind of thing, sometimes with less code? 

Switch： That may be true. And you can cut a piece 
of wood with a hammer if you whack at it long 
enough. Personally, I’d rather just use a saw. The 
reality is that everyone has their specialty, and mine is 
efficiently choosing between several different things. 

I don’t have any beef with If, but he’s a tool better 
suited for a different job. 

Head First： You mention efficiency. Tell us how 
efficiency figures into what you do. 

Switch： Well, I’m structured to make a decision 
based upon the value of a piece of data, and all I 
do is compare that piece of data to possible matches 
to determine which code to run. That’s it. I don’t 
bother trying to evaluate expressions, and I don’t 
require nesting or anything cute like that to choose 
between multiple outcomes. If you want to make a 
quick decision based upon a piece of data, I’m your 
guy! 

Head First： Tell us about your buddy Break. We’ve 
heard you can’t get through the day without him? 

Switch： That is a fact. Without Break, I’d be in big 
trouble because I wouldn’t have a way to separate the 
different pieces of action code. Break lets me know 
when a section of code has finished running so I can 


exit without running some other code by accident. 

Head First： I see. What about Case, aren’t you guys 
pretty close as well? 

Switch： Absolutely. Case and I have a very close 
relationship, primarily because Case tells me what 
all the possible matches are for a given piece of 
test data. Without Case, I would have no basis for 
making a decision. 

Head First： So I get that Case lays out the different 
possible matches, and you use those matches to 
determine what to do. But what happens when the 
test data has no match? 

Switch： It depends. If no special code has been 
added to deal with a “no match” scenario, then 
nothing happens. However, my good friend Default 
makes it possible to run a special chunk of code only 
in the event that no match was found. 

Head First： Wow, I didn’t realize that. How does 
Default get along with Case? 

Switch： Just fine, actually. They don’t step on 
each other’s toes because they never compete for 
attention. Case handles all the stuff that matches, 
while Default takes care of the situations when 
nothing at all matches. Just between us, I think 
Case is actually a little relieved that Default is there 
because he gets nervous when nothing matches. 

Head First： I see. Well, we’re about out of time. 
Any parting thoughts before you go? 

Switch： Sure. Remember that there’s nothing worse 
than indecision. Nobody likes a waffler. Just because 
there are lots of possibilities doesn’t mean you have 
to throw your hands up and quit. Give me a call 
and I’ll do my best to help you make a decision that 
works out best for your script. 
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:^l|^rpeti your pencil 


Convert the first two scenes of the Stick Figure Adventure code so 
that it uses the switch/case statement instead of if/else. 


’if (curScene == 0) { 

curScene = 1; G 3t - a fork in the road. M ； 

message = "Your journey begms at a torK 

else if (curScene == D { 
if (decision == 1) ( 

curScene = 2 , little house in the woods. 

message = "You have arrived at a cute 丄 u 

else { 

message e = = 4ou are standing on the bridge overlooking a Peaceful 
stream. M ; 


Wcmcs the 
vc\rsioh op -the ^odc 
that uses i-P/ else. 
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sharpen solution 


c^ij^rpen your pencil 

Solution 


Convert the first two scenes of the Stick Figure Adventure code so 
that it uses the switch/case statement instead of if/else. 


if (curScene == 0) { 

curScene = 1; a fork in the road. M ； 

message = "Your Dourney begins at a torK 

else if (curScene == D { 
if (decision == 1) 
curScene = 
message = 


the o\ri^ihal 
vc\rsioh of the todt 
that uses i-P/ dsc. 


else { 

curScene 
message : 
stream. M ; 


== 1 ) { 

You have arrived at a cute little house in the woods.^ 
4ou are standing on the bridge overlooking a Peaceful 


sy/i 


^t\\ case 
匕 omrespohds a 

humbev-. 


dasc 0} 

£.u\rS^(C»)C I 

message — u youv- jouv-^cy bc^ms a*t a -fov-k'm road.” 
break; 


Se 七 i\\t y\C^j stcy^c bev 
a^d *t^c stc^c dcs^'iftio^ 
message 七€此 jus*t l'»kc \v\ 
-tVic i-f/clsc version. 


lA/i-bWm tacM cast, it still . - • - - •'. 

makes stY\st *to stidlc v/i 七 (dedisio 灼二二 I) { 

i-f/clsc -fov" *tV^c 

usev^s s-tovy dctisio\r\. 


The 

s^Ches follow a 
sirwiblr s-tv-u^tuv-c- 



duv-Sdc^C — Z 

rwcssa^c ^ U you have (ittlc house m -the 

} . 

else { 

duvSdc 灼 c 二 

r^cssajc — u yo u 3v-c s*ta^d*mg, oy \ -the bv-idjc ovcv-lookmj a pca^c-ful s*t\rcam w ; 

•} . 

bv-cak; 


} 
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decision making 


A switchy stick figure adventure: test-drive 

After completely reworking the decision-making logic for Stick Figure Adventure, 
Ellie is itching to see the result. The changes are immediately noticeable as you 
navigate through the story... 




S-bof 七 


J 





looks 

七 he same- 


Hang on, nothing looks any different! And that’s because the switch/ 
case changes to Stick Figure Adventure only affect the structure of the 
code, not its appearance. This is an example of how some coding changes 
take place purely behind the scenes... literally! 


STICK FIGURE 
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so how does it end? 


The story goes on 


Stick Figure Adventure is really just the start of 
the story. It needs some creative storytelling, a little 
stick figure artwork, and plenty more JavaScript 
code to be a truly interesting online application. 
Where will you take it from here? 
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JavaScPiptcposs 

Here’s an easy decision. Is it time to take a break 
and knock out a little crossword puzzle? Of course! 



Across 

1. Writing this first can make it easier to write complex 
JavaScript code. 

4. Use these to document your code. 

5. This kind of statement is actually made up of multiple 
statements. 

6. When one if statement is placed within another, it is said to 

be. 

8. The != operator tests for this. 

10. You can use one of these to help visualize a group of 
complex decisions. 

13. The entire script has access to this kind of variable. 


Down 

2. Do this,.... do that. 

3. These kinds of operators have a true/false result. 

4. How code is run when it is part of an if-else statement. 

7. A statement that allows you to make a decision based upon 
the value of a piece of data. 

9. A variable that has limited scope. 

11. This statement allows you to conditionally run a piece of 
code. 

12. Each decision branch inside of a switch statement has one 
of these. 
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JavaScriptcross solution 



JavaScriptcross Solution 
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decision making 



Fold the page vertically 
to line up the two brains 
and solve the riddle. 




V 嫩 


Wken i {/ else isn’t enougfk... 


I Vs d m’mds , 七 




Altkougli tke ii /else statement is 
increctitly kancty, it does kave its 
limitations. For example, you can’t switck 
between more tkan two tilings. In 
case you cton’t believe it，try it yourself. 
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5 looping 


, At the Risk of 
’ Repeating Myself 餐 



Some say repetition is the spice of life. Sure, doing something new and 
interesting is certainly exciting, but it's the little repetitive things that really make it possible 
to get through the day. Compulsive hand sanitizing, a nervous tick, clicking Reply To All 
to every freaking message you receive! Okay, maybe repetition isn't always such a great 
thing in the real world. However, it can be extremely handy in the world of JavaScript. 
You'd be surprised how often you need a script to run a piece of code several times, and 
that's where the power of looping really shines. Without loops, you'd be wasting a lot of 
time cutting and pasting a bunch of wasteful code. 


this is a new chapter 
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how many "steps" to find the buried treasure 


X marks the spot 


It’s hard to argue the allure of buried treasure 
Here’s a treasure map that could use some 
JavaScript assistance. 


First, walk east for 
exactly 37 steps. 


37 S-tcpS. 




M yeah, it 


s 


o Then, walk until you see a rock 
shaped like a piece of popcorn. 


o X really does mark the spot! 


The first part of the map can be traversed by repeating an action (taking 
a step) a certain number of times (37). So, taking 37 steps is a matter of 
repeating a single step 37 times. 


Tak'mj a step is a 

vcpcatablc 灼 


o 


MV 冰 







37 s-teps is v-cally 

37 cycles ^~inLt P ^ d 
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looping 


l?eja vu all over agaiw...for loops 

Repetition in JavaScript is carried out with loops, which allow 
you to repeat code. The for loop in particular is great for 
repeating something a certain amount of known times. For 
example, for loops are great for counting tasks, such as counting 
down to zero or counting up to some value. 


For loops let you 

repeat code 
— ■ — 

certain numter 


A for loop consists of four different parts: 



Initialization 

Initialization takes place one time, 
at the start of a for loop. 



Test condition 

The test condition checks to see 
if the loop should continue with 
another cycle. 


❺ Action 

The action part of the loop is the 
code that is actually repeated in 
each cycle. 

❹ Update 

The update part of the loop 
updates any loop variables at 
the end of a cycle. 


oi times. 

O 

Initialization 


❺ 



Ste ? s i, ^ ^ 

plate ov\U -fov- cvevy 


■■❺ ^ ■■❺ ^ ■■❹ ^ ■■❺ ^ ■■❺ ^ ■■❹ 




V 





How do the four steps in a for loop relate to 
the treasure map example? 


Ov\t loop ey 匕 le 


loop 乙 yd 


c 
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the for loop: make it count 


Treasure hunting with a for loop 


for loops work for following the treasure map because they involve 
a known number of steps. Applying a for loop to the first part of 
the treasure map will look something like this: 


o o 

for (var x = 0; x < 37; 
takeStepO ; 

❺ 


o 

x++) 



I 灼 dVCmCirrt same 

as ^ + I. 



Breaking down the code for the for loop: 




❶ 

O 

❺ 

❹ 


Initializate the counter variable x to 0. 


ft s -to s-b\rt ^ouh-tma 

O ih JavaS 匕 \rip 七 loops ； 
although -the loop 匕 。 u |d easily 
be -to s-tavt at /. 


Check to see if x is less than 37. If so, move on to Step 3 and continue 
the cycle through the loop. If not, quit the loop. 

Run the loop action code, which in this case means running the 
takeStep () function. 

Increment x and go back to Step 2 to possibly start another loop cycle. 


After 37 cycles through the loop, the loop finishes with x equal to 37. 
All this thanks to the four pieces of the for loop puzzle that work 
together to establish JavaScript repetition. 


Initialization o 

Starts the loop with the 
counter, x, at 0. 

var x = 0 


Test condition o 

Only perform another 
loop cycle if the test 
evaluates to true, that is 
if x is less than 37. 

x < 37 




37 cycles 


Action ❺ 

Gall the takeStep () 
function to take a step. 

takeStep() 


Update o 

Update the loop counter 
by adding 1 to x. 

x++ l^crtner\i x, same 
as x — x + /. 
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looping 


Pisscct the for loop 


All for loops stick to a consistent format that requires each of the four 
components to be in specific places. The good news is that there’s plenty 
of flexibility to craft your own custom loops using this format. 

^|| -fov loops s*tart The Codt, 

+o\r. whidh usually sets up 

] the loop ^ouhtev-. 


The loof to^*trol update, 
usually *mdvcmcr\*b o\r dctvcmcr\*b 
3 dour\*tcv" vaviablc- 





The dd'tioh "fco be 
repeated, whidh is a si^le 
(o\r 乙 ompouhd) statement. 




TV iesi ^ohdii 

which ultimately results 
,h a tv-uc/-false value. 


gt^\to\ov\s art rt^\rtd 
七 cv • 七 he mrbal ㈤ 七 10 灼 
and -test tov\A\ {: \ov\ codt 



Pavcy\*t^cscs c^tlosc *t^c 
Test, Ufda-tc 
pav**ts of *tV^c loop- 



ExeftciSe 


Finish the code that first prompts the user to enter a number greater than 0, and then uses 
that number as the starting count for a for loop that performs an old movie reel countdown 
(4, 3, 2,1, Roll film!). Also, make sure to validate that the number is really greater than 0 before 
performing the countdown. 

£*tovc *biic \r\iAmbcv" m 

七 “⑽ t va,-.akle.^ to i, P ut a _b^— ^^ 


Pv-ornp-t the usc\r 
"to ihpu"t B hurwbev*. 


var count = prompt("Enter a number greater than 0: n , "10"); 
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exercise solution 



Finish the code that first prompts the user to enter a number greater than 0, and then uses 
that number as the starting count for a for loop that performs an old movie reel countdown 
(4, 3, 2,1， Roll film!). Also, make sure to validate that the number is really greater than 0 before 
performing the countdown. 


七 he tour\*b variable 


A 


P\roi 叶七 the usc\r 
"to rnput B hurwbev* 



Aldkc suve 
,s v 

thah O. Tov- 


var count = prompt("Enter a number greater than 

i-f ( 匕 。 uirrt > O) { 


(va\r — dou 此 . 


•m … 

l^i-tializjC . . . 

loop dou,W 

£.our\*t- 

else 



Cour\*b doy/r\ 
*to I- 


"the douhtev 

tirwc 

thvough 

the loop. 

SV^oy/ 

tuv-v-c\r\*b 


Invalid daia. 


alc\rt(” 丁 he 的 umbev* was /七 jv-ca*tcv- O. Ko movie -fov you^O 




Mandango: a macho movie seat finder 

Movie reel countdowns aren’t the only way Java Script loops 
can be applied to movies. As you may know, most macho men 
want an empty seat between the occupied ones when watching a 
movie together. This knowledge has led Seth and Jason to create 
Mandango, the macho movie seat finder. 

The idea is to allow manly buddies to buy movie seats in groups of 
three so there is always a seat between them. Problem is, Seth and 
Jason haven’t figured out how to make it work... yet. 
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looping 


First check seat availability 

The challenge facing the guys is to be able to search through each 
seat in a row，checking for a sequence of three available seats. 



Not cool. 

Anything other than three 
available seats together result 
in a major lack of “manlitude.” 


ohc scat 
available- 


All 七 Wre 
scats *bakcy\. 


All scats 
available! ^ 



Cool! 

Three available seats in a 
row means plenty of manly 
movie viewing room. 



Using the row of movie seats below, write down how you would 
search for three available seats in a row using a for loop. Make 
sure to draw exactly how the loop works with respect to the seats. 
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sharpen solution 


(^Jterpen your pencil 

Solution 


Using the row of movie seats below, write down how you would 
search for three available seats in a row using a for loop. Make 
sure to draw exactly how the loop works with respect to the seats. 


I-P availability scat is by a boolean variable ； you 匕 a 的 

loop -thv-oujh 七 he sca*b lookm^ -fov- m a vow 七 av-c available (*bruc). 



-false *bruc -false 



*bruc *t\ruc *tv*uc 


&r\d loop a 灼 d 

s-tof look'mj. 

-false *bruc -false 


S*ta\rt looping 
"through scats. 



Ohly ohC 

sea 七 opch 


TWc m a 

\roy/) toolf 


Looping. HTML, and seat availability 

The general Mandango design makes some sense but it isn’t exactly 
clear how the availability of each seat translates into HTML code. 


^OVIC scat ^ or.wwn 

visually oh -the Mav\da^o 
p3gc ds dh 


Full ftTAIL ahd images 
this example av*e 
available ai h*ttp://www.| 

hcad-Pivs-tlabs.^o^/books/ 

hfy/. 


<img 

<img 

<img 

<img 

<img 

<img 

<img 

<img 

<img 


id="seatl M 

id= M seat2" 

id= M seat3 M 

id= M seat4 M 

id= M seat5" 

id= M seat6" 

id= M seat7 M 

id="seat8 M 

id= M seat9 M 


S eat_unavail.png" alt^-Unavailable 1 
S rc="seat—avail.png n alt= M Available /> 
src="seatlunavail.png" alt=-Unavailable" 
S rc="seat—avail.png n alt= M Available M /> 
src= M seat_avail.png" alt= M Available M /> 
src= M seat_avail.png" alt= M Available M /> 
src="seatlunavail.png" alt=-Unavailable- 
src= n seat—avail.png n alt="Available /> 
src="seatlunavail.png" alt="Unavailable' 


/> 


，> 


Not only do you need to be able to loop through the HTML image 
elements, you also need a way to store their availability together as 
boolean variables in JavaScript code. 
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looping 


Movie seats as variables 

Before you can even think about looping through seats looking for availability, 
you have to represent the availability of each seat in JavaScript code. The 
availability of a row of nine seats can be represented by nine boolean variables. 


var 

seatl 

=false; 

var 

seat2 

=true; 

var 

seat3 

=false; 

var 

seat4 

=true; 

var 

seat5 

=true ; 、 

var 

seat6 

— true; 

var 

seat7 

=false; 

var 

seat8 

=false; 

var 

seat9 

=false; 


T\\t availability caA 
sc3*b stoved as d boolc3^- 



Tirue a 
scat is available- 


is unavailable. 


Now you’re ready to create a for loop that loops through these nine seats, 
checking for three in a row that are available. 


for (var i = 0; i < 10; i++) 
if (seatl) 


V^u the 

variable 

through the loop/ 


Hang on, there appears to be a problem. The for loop needs to be able 
to check the value of a different seat variable each time through the loop. 
But there isn’t a way to do that since each variable has a different name. 



So I need a way to use 
the same variable name 
to loop through multiple 
pieces of data? Sounds 
like fun... not! 


O 

o 





If individual variables don’t work so well in loops, how could 
you store information so that it can be looped through? 
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an array of data 


Arrays collect multiple pieces of data 

JavaScript lets you store multiple pieces of data in a single variable with 
a special type of data called an array. An array variable is like a normal 
variable since it only has one name, but an array has multiple storage 
locations. Think of an array as being like a storage cubby in your house — 
it’s one piece of furniture with multiple storage locations. 

Each item in an array consists of two pieces of information: a value and 
a unique key that is used to access the value. Keys are often just numbers 
that start at zero and count up with each item. Numeric keys are known as 
indexes, making this an indexed array: 





/Way value. 


Creating an array is similar to creating a normal variable except you have 
to let JavaScript know you want an array, as opposed to a single unit of 
storage. In fact, you’re really telling JavaScript to create an object. 




var showTime = new Array (); 


This is s hew object 

type Av*v-ay. 


"Hie o-P -the 

ainray variable. 




Cvca-tc a … 
avvaY object 


o 


Don’t worry about the fact that an 
array is actually an object. 

For your immediate purposes, it really 
doesn’t much matter that an array is really 
an object. You learn plenty about objects in Chapters 9 and 
10, in which case the object stuff will naturally work itself out. 
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looping 


Array values arc stored with keys 

Object or not, once you’ve created an array you can start adding and 
accessing data in it. The key to getting to the data stored in an array is, 
well, the key! The unique key associated with a piece of data is what you 
use to access that data. In the case of an indexed array, you just use the 
index of the array element you want to access. 

The value ijo be 



The mdc% o( tiic array 
value, eulosed v/rbiVm 
s(\[ASrc b\ratkc*b. 


This code sets the first value of the showTime array to a time of day. If 
you don’t want to manually set each value of an array one at a time, you 
can initialize the entire array when you first create it. 


Lis 七 ou ■b dll o( 

avvay values ， ated 

by 


var showTime 


The -Pi\rst pav-t of 
■the a\r\ray dv-ca-ti Oh 
s-tav-b o-hf the same. 




"12:30", "2:45 n , "5:00 "； "7:15", "9:30"]; 


Make suv-c bo ⑼ dose list 
av-v-ay values y/rth s^uav-c bva 匕 ke*U. 




A 妁 d d 。 〆 七 

-forget the 

scmi^oloh. 


Wait a minute, this code doesn't involve all that object stuff. What 
happened? This code sidesteps the formal creation of an empty object by 
going ahead and building an array (object) from the values it contains. Just 
list out all of the elements that go into the array, enclosed within square 
brackets. With the array populated with data, you’re ready to use it! 


the last value 



alert("The late movie starts at " + showTime[4] + 


Arrays store multiple pieces 
oi data in a single, place. 
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array exposed 



Avvays 

This week’s interview: 

Inside the mind of a serial data storer 


Head First ： Good to meet you, Array. So I hear you're 
good at storing multiple pieces of data. 

Array ： That ? s true. Fm all about volume. You need a 
place to store 50 strings of text or 300 numbers, I’m your 
guy. 

Head First ： Sounds intriguing. But can’t people already 
store quantities of data in normal variables? 

Array ： Sure, and people can also walk to work barefoot if 
they want. Look, there’s always more than one way to do 
things. In this case, I provide a better way to store multiple 
pieces of information than regular variables. 

Head First ： Well, I do prefer wearing shoes to work. But 
how exactly are you better? 

Array ： Think about it this way. If you’re keeping a diary 
and you write down something every day, how do you 
keep up with all of those pages after a few years? 

Head First ： The pages are all right there in the diary. 
What’s the big deal? 

Array ： You’re making a big assumption about the 
pages being organized together with some sense of 
connectedness. What if they were just a bunch of random 
sticky notes thrown in a shoebox? That diary would 
suddenly get a lot tougher to manage. 

Head First: Right, but how is storing data in an array 
like keeping diary pages in a book? 

Array ： Because I organize the data in such a way that it 
is very easy to access. For example, if I ask what you wrote 
in the diary on last June 6 th, you would probably tell me 
to turn to page 124. Same thing with array data, except 
the page numbers for an array are called keys. 

Head First ： I’ve heard of array indexes, but not keys. 
What’s a key? 


Array ： Oh, sorry. A key is a general term used to describe 
a piece of information used to look up a piece of data. 

An index is just a certain kind of key, a numeric key. So 
the diary page numbers are not only keys, they are also 
indexes. If you’re talking about looking up data with 
unique numbers, keys and indexes are really the same 
thing. 

Head First ： Got it. I guess the thing I still don’t 
understand is what any of this has to do with looping. 

Array ： Well, not necessarily anything. I’m plenty handy 
for storing data without loops ever entering the picture. 
However, I do make it incredibly handy for loops to cycle 
through a bunch of data. 

Head First: How so? 

Array ： Remember that loops often use numeric counters 
to control the looping, right? Just use the counter as the 
index into an array, and voila, you now have a way to 
cycle through all of the data I have stored away. 

Head First ： Hang on, you’re saying people can use a 
loop counter as an array index to look up data? 

Array ： That’s exactly what I’m saying. 

Head First ： That’s pretty powerful! 

Array ： I know. That’s why scripts that need to loop 
through data find me indispensable. In just a few lines of 
code, you can loop through an entire array of data. It’s 
really quite cool. 

Head First ： I can imagine. I want to thank you for 
shining a light on yourself and your connection to loops. 

Array ： Glad to do it. Look me up any time! 
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rperi your pencil 


Write code to create a seats array for Mandango, and then loop 
through the seats in the array, alerting the user to the availability 
of each seat. 


tWeiare no o 

Dumb Questions 


Is it possible for a for loop to 
never stop looping? 

Ah, yes, the dreaded infinite loop. Sure, 
it’s very possible to create a loop that never 
exits, destined to cycle on and on to the 
limits of space and time... or at least until 
you reload the web page. Infinite loops are 
considered bad things because they prevent 
your script from doing anything else—it's 
the JavaScript equivalent of a locked-up 
application. Think Windows blue screen, only 
not quite as ominous. 

Infinite loops occur when a loop counter 
either doesn't get updated properly, or when 
it otherwise never changes to cause the 
loop's test condition to result in a false 
value. Knowing this, you should always 
double and triple check the test condition 
and update logic in your for loops very 
carefully. Oh, and you'll know you have an 
infinite loop on your hands when your script 
just sits there apparently doing nothing. 


Is it possible to use a compound 
statement as the action part of a for 
loop? 

Absolutely! In fact, in all but the most 
simple of looping scenarios, you will need to 
use a compound statement. This is because 
most practical loops end up needing to loop 
through more than one statement. 

When the loop condition tests 
false, does the action part of the 
loop run one last time? 

No. The action part of a for loop only 
gets executed if the test condition evaluates 
to true. Once the test condition evaluates 
to false, the loop immediately exits with 
no other code getting run. 

Do indexed arrays always start 
their indexing with 0? 

Yes and no. By default, all indexed 
arrays start at 0. However, you can override 
this behavior and set numeric keys to 


any number values you want, although 
inconventional. Unless there is a very good 
design decision for not using zero-based 
indexes, don't do it...it's unconventional 
behavior and could cause confusion. 

Does the data stored in an array 
always have to be the same type? 

No, not at all. For the purposes of 
looping, it is important for array data to be 
of the same type because the whole idea 
is to loop through a set of similar data. For 
example, if you want to loop through an 
array of scores to calculate an average, it 
wouldn't make much sense for some of the 
array entries to be booleans—they should 
all be numbers in this case. So although 
arrays can contain values of different types, 
it's generally a good idea to store data of the 
same type in arrays, especially when you're 
storing a collection of like data. 
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sharpen solution 


(^Sharpen your pencil 

Solution 


Write code to create a seats array for Mandango, and then loop 
through the seats in the array, alerting the user to the availability 
of each seat. 


S*m6c array mdc^cs 
stav-t a-t O f stav-t loop 
at 0 as y/cll- 


梦？ 地 with 

b °olc^ values. 


Scpav-atc *tiic av-vay 
values y/rtii Commas. 


Although you Could’ve used the ^ 

o-P -the av-v-ay objed-t^cJbciic^ 知 ” 》 • 七 A—.?•; 

心 beUe , b 一 ““ U 。 七、 


CVCh i-p -the humbev* o-p scats ih the 

^ha^ges at some poiht 


|h 匕 verwCKrt the 
loop ^ouhtev* s*mdc 
wc \rc douhtmg up. 



TVic loof touir\*bcv- is 
used as ar\ av-v-ay mde% 

-to s*tcf *t^vou^ all of 

ihe av-v-ay values. 



i-f (sca*tsti3) 

. 

alcv-*t( w Sca*t w + i + )} is available-^); 

else 

alcv-t( w Sca*t w + i + w is y\o{, available-^); 


Display a di-ffcvc^-t alcv-t 
based upor> whe 七 heir 七 he 
scai is available (tv-uc) ov 
灼 。七 (-false). 





BULLET POINTS 


■ for loops repeat a piece of JavaScript code a specific 
number of times. 

■ The increment (++) and decrement (--) operators 
provide a handy way to update loop counters. 

■ An array allows you to store multiple pieces of data in a 

single place. 


■ Although an array holds multiple pieces of information, it 
has a single variable name. 

■ Indexed arrays are accessed using numeric keys called 

indexes. 

■ Indexed arrays work great with loops because they allow 
you to use a loop counter to loop through array data. 
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looping 


From JavaScript to HTML 


Mandango seat availability is represented by an array of booleans. So the 
next step is translating this array into HTML images (which are available 
at http:/ / www.headfirstlabs.com/books/hjfjs/) that reflect the seat availability 
on the Mandango web page. 



Although this looks nice, there isn’t actually any code to map the array of 
booleans to visual seat images on the web page. Now this is a problem. 





How could you make the connection between the JavaScript seat 
availability array and the seat images on the Mandango page? 
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I see.... a seat 


Visualizing Mawdawgo seats 


To tie the JavaScript array to the HTML images, first make sure 
the images are laid out in an accessible way, then determine what 
images are going to be used to represent the different seat states. 
Let’s tackle the last task first. 

Available 



This applies 

"to the 

y/liCh scat 

sclcd-tiohs aire highlighted. 



seat_select.png 


seat_unavail.png 


These seat images are assigned to the sre attribute of each HTML seat 
image to set the images that appear on the page. 


TWis IP is m 

*tV^c av-v-ay "to sea 七 

images - i*t w\us*t s*tav-*t a*t 
0 av^d ai just like 
av-v-ay "mdc^cs. 


<img id: 




The challenge then becomes looping through the boolean array, setting 
the seat image for each HTML <img> tag on the page. The steps 
required for this task are surprisingly similar to how we looped through 
the seat array earlier. In fact, the only real difference lies in the loop action. 



Initializate the counter variable i to 0. 

Check to see if i is less than the array length (9). If so, move on to Step 
3 and continue the cycle through the loop. If not, quit the loop. 

Run the loop action code, which in this case sets the seat image. 

Increment i and go back to Step 2 to possibly start another loop cycle. 
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The Mandango seat initialization takes place in the initSeats () 
function, which carries out the mapping of JavaScript array to HTML 
image seat images using a seat initialization loop. 



Up CjaSe 




The loop douh-tev* 
s-tav-ts ai 0 s’m 匕 e 
the ’mde>ced av-v-ay 
s-tav-fcs a-t 0. 



T\\c *tcs*t doir\dii*t>oir\ 

^cdks -to see i-f all 
i\\t sca-U V^avc be ⑼ 

looked *tVou 咖 o 


The i hi ^|j^ ioh ^^ icd oui , 

' h，iSc3W ^olves sdii,a the y 

STT 0 ” he 



appea^nce of all seats 
< seats.length; i++) { 


function initSeats ( 

// Initialize 
for (var i = 0 
if (seats[i]) { 

// Set the seat to available 
document.getElementByld("seat 
docui^ent. getElementByld ( "seat 

els _ 

// Set the seat to unavailable 
document.getElementByld("seat" 
document.getElementByld("seat" 


IhdV-CmCht the 
loop ^ouhtev-. 


i).sre 
i).alt 


M seat_avail.png' 
"Available seat' 


i).sre 
i).alt 


M seat_unavail.png' 
"Unavailable seat' 



|Jf scat value 

,s tvuc, set O 

scat *to amiable- 


The scat ir^age ID is 

Seated *(Vo 你 the A 

loop ^ouhtev- Vr 
thvough the loop. 


/-f ihe scat value 
if ^ set the 
HT/I/JL sca-t ir^aje 
"to uhavailablc. A 

❺ 



丁 he id of 
"this scai 
is 
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the variables of seat searching 


Not so macho seat searching 

With the seats initialized, it’s now possible to move on to the seat searching, 
which is really the point of Mandango. Seth and Jason have determined 
that it might be better to first get the script finding individual seats 
before embarking on the eventual three-seat search. This simplifies the 
immediate task, allowing them to build the application incrementally. 

Since they want to search for a single available seat, the first thing the 
script is going to need is a variable to keep track of the seat selection. 



global va\ridble ； whidh medhs i-t is 
d^dessible thyoughout the s^vip-t. 



This variable stores the seat selection, and needs to hang around for 
the life of the script, which means it must be a global variable. So, the 
f indSeat () function, which handles the job of finding a seat for the 
user, will rely on the selSeat variable for storing the index of the 
selected seat. 

The selSeat variable makes 
sense, but what value 
indicates an unselected seat? 




Seth brings up a good question. The selSeat variable stores the seat 
selection, which is in the range 0 to 8 when a seat has been selected. But 
you also need to know when a user hasn’t chosen any seats yet. A special 
value can indicate this state of unselection, which can be noted as -1 (no 
seats selected yet). So selSeat really needs to start out initialized to -1. 


var selSeat 


1 


TVic scISca-t variable is ^ 

•mrbalizjcdl *to - 1 so 

s*tav-b wVbh 

Y\o scat SclcttlOir\. 


With the seat selection variable in place, we’re ready to assemble the 
f indSeat () function, f indSeat () will search through each seat in 
the seats array, find available seats, and then prompt the user to accept or 
reject each available seat. While it’s true that macho guys won’t be happy 
with this initial version of Mandango, it’s a step in the right direction! 
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JavaScript Magnets 


The Mandango f indSeat () function is where the user searches for 
an available seat, and then confirms or denies any seats that are found. 
Help out Seth and Jason by finishing the missing code with the magnets. 


function f indSeat () { . Ml seats to clear them 

// if seat is already selected, remxtxaUze all seats 

if ( .. 


// search through all the seats for availability 
for (var i = 0; i < seats.length; i++) { 

II gee if the current seat is available 


if 


// Set the seat 


selection and update the appearance of the seat 


n 丁 W 。卄” + i 、 = n seat select.png n ; 

document.getElementByld( seat + i) •. - 

document.getElementById("seat" + i) .. = ，，Your Seat ’ ，； 

// prompt the user to accept the seat 

var …… =confirm ("Seat ” + (i + 1) + ” is available. Accept ?")； 

if ( . } . { , H sea t so clear the seat selection and keep looking 

// The user rejected the sear, so u 丄 

.=-1 ； 

i th + i) = n seat—avail.png n ; 

document.getElementByld( seat .. 

—” 丄]、 ="Available seat n ; 

document .getElementByld( sea .. 


initSeats 


accept 
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JavaScript magnets solution 


JavaScript Magnets Solution 

The Mandango f indSeat () function is where the user searches for 
an available seat, and then confirms or denies any seats that are found. 
Help out Seth and Jason by finishing the missing code with the magnets. 


function findSeatO { . . —Ml seats 

//If seat is already selected, reini 


to clear them 


if 


0) 


■1 


㈣ 以二 


// search through all the seats for availability 
for (var i = 0; i < seats.length; i++) { 

II see if the current seat is available [4- scat is 


I seat: 

if 

/ / Set tY 


the seat 


IselSeaJ 


available, 


scatstiJ will be tvuc. 


The sc3*t r>unr»bcv is 
shoym oy\c liijhcv- -fco 七 li 
usev- smdc rwos-t usevs 
star 七 hurwbeirmg at I 
mstcad o-f O. 


t 


{ ^ UC * 

selection and update the appearance of the seat 


document.getElementById( n seat" + i). 
document.getElementByld("seat" + i). 


sre 


alt 


'seat—select.png n ; 
'Your seat"; 


// 


var 


bo see 
t user 

■bed 

ble scat 


'rompt the user to accept the seat 

+ (i + 1) + M is available. Accept ?")； 


accept 




confirm("Seat 


if 


LL 


The user 


I selSeat I 


ejected the seat, so 


clear the seat selection and keep looking 


■二一 1 


document .getElementByld( n seat + i)| 

document .getElementByld("seat' + i) 


sre 


seat_avail.png n ; 
'Available seat"; 
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Test drive: the solo scat fiwdcr 

The solo seat searching version of Mandango uses a for loop and 
an array to allow the user to search for individual available seats. 
Not very macho, but functional nonetheless... 


Itr ir i 




TV^c iascv c\\eks Ca^dcl -to 
Sc3*t 2 - sclent* 


ZM 鑷钃 


X 




Seat 2! ik available. Accept? 


Cancel 




OK 


Vf¥ 


X 


>c 


iMMUqm - Wmn I clLi^ hi-rtii 




The usev dicks 
0 ^ -to aut\>i -the 
Sea 七午 sdc^-tioh. 




>C 


X 
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loop de loop de loop … 


Too much of a good thing: endless loops 


Although the Mandango single-seat search technically works at finding an 
individual seat that is available, there’s a problem in that the loop doesn’t 
know when to stop. Even after the user accepts a seat by clicking OK, the 
script keeps on looping through the remaining available seats. 


Sea 七今 has al^ady kc ⑼ 
attested 

keeps ⑽ lookm^ -fov r^ort 
scats 叫叫， 
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looping 


Loops always need an exit condition (or two!) 


Since the overzealous seat searching seems to be caused by the 
loop never ending,Jason thinks a closer look at the for loop 
in the f indSeat () function is in order. 


for (var i = 0; i < seats.length; i++) { 

// See if the current seat is available 
if (seats[i]) { 


// Set the seat selecJ^Lon and update the 
selSeat = i; 

document • getElemen^Byld ( n seat，' + i) . src 
document • getElemer|tById ( n seat，' + i) . alt 


"The ^Oh-Pi\rrn0 p\rorwP-ts -the 

"to ahswc\r a yes/ho <\^shoY\, 
t\ruc (yes) o\r (a\st (y\o). 


appearance of the seat 

: "seat_select.png"; 

: "Your seat"; 


// Prompt the use\(/to accept the seat 
var accept = confirm("Seat " + (i + 1) + " is available. Accept?"); 
4^___ Li ar.r.pp t ) { 


// The user rejected the seat, so clear the seat selection and keep looking 
selSeat = -1; 

document • getElementByld ('’seat'，+ i) . src = "seat_avail. png"; 
document • getElementByld ( "seat，，+ i) . alt = "Available seat"; 

ik usc\r adepts ah available 
兄此 ho-thmg happens av\d the 
loop jus 七 keeps Oh Wkmg. 



TViis IS Codt tVia-t 
y/Vicy\ user docs NOT 

attest 3^ ava 丨 UWe seat 


So when the user clicks Cancel to reject a seat, the selSeat variable 
is set to -1 (no selection), and the loop continues. However, there’s no 
code at all for when the user accepts a seat. This is good since it allows 
the selSeat variable to remember the current seat, but there’s nothing 
stopping the loop from continuing looking for seats. 





What needs to happen when the user clicks 
the OK button to accept the current seat? 
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break time 


A "break" iw the action 

The problem with the Mandango code is that you need to bail out of the 
loop once the user accepts a seat. One possible fix is to trick the for loop 
by setting the counter to a value larger than the length of the array. 


This c^ds "the loop by the 

i = seats • length + 1 ; ~ dohdi*tio^ "to -fail... bu*t "thevVs 

3 bettev* way -fco -fovtc loops -to 


Although this code is a clever little hack that gets this done, there’s a better 
way that doesn’t involve monkeying around with the loop counter to trick 
the loop condition. The break statement is designed specifically for 
breaking out of a section of code, including loop code. 


break 


loo\>) do y\o*t \>ass ^o, 
do y\o*t dollc6*t /2-00. 


When a loop encounters the break statement, the loop immediately ends, 
ignoring the test condition completely. So the break statement provides 
you with a handy way to immediately exit a loop, no questions asked. 


Closely related to break is the continue statement, which bails out of 
the current loop cycle but doesn't exit the loop itself. In other words, you 
can use continue to force the loop to jump to the next cycle. 

Jurwp out o( -the 

loop - 

with -the hext ohe. ^ continue ; 


Both break and continue are extremely 
useful in fine-tuning the control of loops, but 
break offers a solution to Seth and Jason’s 
immediate Mandango looping problem. 
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Does the remaining action code in 
a for loop finish the current cycle when 
the break statement is used? 

No. The break statement forces 
an immediate end to the loop, completely 
short-circuiting the normal flow of the loop. 


Why is tinkering with the loop 
counter to force a loop exit a bad thing? 

Because you're not really using the 
loop counter for what it was intended, and 
therefore run the risk of introducing unusual 
bugs. Instead of counting through the array 
elements as expected, you're forcing the 
counter to an artificial value beyond the 


range of the array just to end the loop. In 
general, you want to be able to trust that 
the update part of the loop is the only place 
where the loop counter gets changed. There 
are always special cases that arise where 
tricks are allowed, but this isn't one of them— 
the break statement handles breaking 
out of the loop admirably and without any 
confusion as to what's going on. 


^|l^rpeti your pencil 


The for loop in the f indSeat () function of Mandango needs 
some help breaking out when the user accepts a seat. Write the 
missing lines of code that handle breaking out of the loop, making 
sure to include a comment to explain how the code works. 


// search through all the seats for availability 
for (var i = 0; i < seats.length; i++) { 

II see if the current seat is available 

selection and update the appearance of the seat 

dfcumenJgitElementById("seat^ + i)-rc ： : 

document.getElementByld( n seat + i).alt 


// prompt the user to accept the seat 
var accept = confirm("Seat ” + (i + 1) 


U 


is available. Accept?") 


else 


se { . fhp seat so clear the seat selection and keep looking 

// The user rejected the sear, bu u 丄上 

selSeat = -1; . 

document.getElementByld( n seat" + i).src = 

document .getElementByld("seat" + i) .alt = 


〖 seat—avail.png' 
’Available seat 
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sharpen solution 


(^Jterpen your pencil 

Solution 


The for loop in the f indSeat () function of Mandango needs 
some help breaking out when the user accepts a seat. Write the 
missing lines of code that handle breaking out of the loop, making 
sure to include a comment to explain how the code works. 


// search through all the seats for availability 
for (var i = 0; i < seats.length; i++) j 
II gee if the current seat is available 

selection and update the appearance of the seat 

documint^gitElementBYldrseat -； + D-rc = : - = 工 . 卿 ’' '• 

document.getElementByld( n seat + i).al 

"Prompt the user to accept seat ^ available . Accept ?")； 

var accept = confirm ("Seat + u 十丄 

.,. 

II 丁 uscv *tV)C scat so y/c .. 

. 

Weak;. 

} . 

. 

else { i w selection and keep looking 

// The user rejected the seat, so clear the seat seiecno 

selSeat -1; th + i) sre = "seat avail.png n ; 

document . getElementByld ( sea .) 北 Ip seat n . 

document.getElementByld("seat" + i).a = , 


Putting the 'man 1 in Mandango 


The original intent of Mandango is to allow users to search for 
available movie seats in groups of three. With the single-seat search 
now working, Seth and Jason are ready to turn their attention to 
a truly macho movie seat search. They need a way to check for a 
series of three available seats. 


Th\rcc available seais ih a 
row … plenty Jc syattf 
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All this movie talk just gets me thinking 
about popcorn... Oh, sorry. I think a few nested 
if statements could knock out the three-seat 
search with no problem. That's how I'd do it! 



C^de J]p Ckse - 

A o^c *t^v*cc 

•is t^ctkcdi us'm^ nested k 
s*ba*tew^yrU. 



I*P th\rcc sea-b ih a 
^ a\rc -Pouhd, sci ihc 
sclc^*tioh "to "the -Piv*S"t. ohC- 


for (var i = 0; i < seats.length; i++) { 

// See if the current seat p/us the next two seats are available 

if (seats[i]) { 

if (seats[i + 1]) { 
if (seats[i + 2]) { 

// Set the seat selection ar update the appearance of the seats 
selSeat = i; ^ — 



document.getElementById("seat" + i).sre = 
document.getElementByld("seat" + i).alt = 
document.getElementById("seat" + (i + 1)). 
document.getElementByld("seat" + (i + 1)). 
document.getElementByld("seat" + (i + 2)). 
document.getElementByld("seat" + (i + 2)). 


"seat 一 select.png"; 

"Your seat"; 
sre = "seat—select.png' 
alt = "Your seat"; 
sre = "seat—select.png' 
alt = "Your seat"; 


all scats 

{p i\\t VledW’ ••眯 ay 

so -tV^at usev see 
scats a^rc available. 


// Prompt the user to accept the seats 

var accept = confirm("Seats " + (i + 1) + " through " + (i + 3) + " are available. Accept?"); 
if (accept) { 

// The user accepted the seat, so we're done 
break; 

} 

else { 

// The user rejected the seats, so clear the seat selection and keep looking 
selSeat — -1; 


document.getElementByld("seat" + i).sre = "seat—avail.png"; 
document.getElementByld("seat" + i).alt = "Available seat"; 
document.getElementByld("seat" + (i + l)).src = "seat—avail.png"; 

document.getElementByld("seat" + (i + 1)).alt = "Available seat"; 

document.getElementByld("seat" + (i + 2)).sre = "seat—avail.png"; 

document.getElementByld("seat" + (i + 2)).alt = "Available seat"; 

来 Rcm'mdcv -： This code ar\d all todc ar\d images -Pov- 
七 he example av-c available a-t 

iicad-Piv-s-tlabs.dorw/books/h-pjs/. 


K "the usc^r ircjc^-ts the 
scats, set theiv- \^aacs 
b 此 k 心 Whble w 
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hoping and wishing for elegance 



Wouldn't it be dreamy if there was 
a way to combine those nested ifs 
into something a little more elegant? 
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looping 


A logical, elegant well-designed solution 
with 林 

There is a better way to handle the three-seat check in Mandango. The nested 
if version works but there’s room for improvement, and the change primarily 
involves making the code more elegant. 


Elegant!? Are you 
kidding me? Oh man, 
that's a good one! 


O 


Despite Seth’s objections, there are times when 
it’s worth making changes to your code so that is 
more “elegant,” which is another way of saying 
the code is clean, efficient, and easy to understand 
and maintain. In the case of the nested i f 
statements, it would be more elegant to combine 
them all into a single if statement... but how? 


0 





The booled^ MD opcv*a*tov- 
two boolcah values 
铋 w they aire both imuc. 


if (seats[i] && seats[i + 1] && seats[i + 2]) { 



The boolean AND operator (&&) compares two boolean values 
to see if they are both true. In this Mandango code, two AND 
operators are used together to see if the three seat values are all 
true. If so, you know you have a series of three available seats. 
Problem solved... and with a little touch of elegance! 
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boolean logic explored 


boolean operator logic uncovered 


You’ve already seen several comparison operators, such as == and 
<.Most of the comparison operators you’ve seen compare two 
values and yield a boolean result. Boolean logic operators also yield 
a boolean result, but they operate only on boolean values — they 
perform boolean logical comparisons. 


a && b 



Tv-uc i-P a AND b av-c boih 
t'ruc, -false othcvv/isc- 


OR 

a I I b 

f 

Tvuc i-f 3 OR b 3v-c 
■brue, -false o-biicvwisc. 


You VC al\rc3d 



False i-P a is tv-uc, 
i-P a is -false. 


Boolean logic operators can be combined with one another to 
create more interesting logical comparisons, typically for the sake 
of making complex decisions. 


Pav-c^cscs alloy/ you *to 5 V-ouf 

boolean lo^id t^rtss\ov\s. 





if ((largeDrink && largePopcorn) 


freeCandyO ; 



You by W /叫 a 

tomko OR by a 


In this example, an AND operator is used to check for a large 
drink and large popcorn...combo! You get free candy with a 
combo. Or, there is another path to the free candy thanks to the 
OR operator — a coupon. So, you can get free candy by ordering 
a large drink AND large popcorn, OR by presenting a coupon. 
This kind of decision would be extremely difficult to carry out 
without the help of boolean logic operators. 


Boolean logic operators 
can te comtinect to carry 
out complex decisions. 
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Q/ I still don't understand the 
difference between a normal boolean 
operator and a boolean logic operator. 
What is it? 

Well, first off, they're all boolean 
operators, which means they always result in 
a boolean value when they're finished doing 
their thing. The only difference is the kind 
of data they operate on. Normal boolean 
operators work on all kinds of data since 
they carry out general comparisons such as 
“equal to," “not equal to," “greater than," 


etc. Boolean logic operators work only on 
boolean data, and therefore carry out logical 
comparisons such as AND, OR, and NOT. 

So boolean logic operators work solely on 
true/false information, while normal boolean 
operators work on all kinds of data. 

So, is the NOT operator a boolean 
logic operator? 

Yes. It operates only on a boolean 
value, so it qualifies as a boolean logic 
operator. It's also a unary operator since it 
operates on only one piece of data. 


How do parentheses work with 
respect to boolean operators? 

Parentheses allow you to alter the 
default order of evaluation of all operators, 
not just boolean operators. Grouping an 
operation inside parentheses forces that 
operation to take place before others 
around it. So, largeDrink && 
largePopcorn is forced to take place 
before the I I operation in the free candy 
code because it appears within ()■ 



rpen your pencil 


It’s the sixth pass through the Mandango for loop (i = 5), and 
your help is needed to determine if three consecutive seats are 
available by checking the seat availability and carrying out some 
boolean logic. 



for 

// 

if 


(var i = 0; i < seats.length; i++) { 

See if the current seat plus the next two seats are available 
(seats[i] && seats[i + 1] && seats[i + 2]) { 
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sharpen solution 


(^Jterpen your pencil 

Solution 


It’s the sixth pass through the Mandango for loop (i = 5), and 
your help is needed to determine if three consecutive seats are 
available by checking the seat availability and carrying out some 
boolean logic. 

*bruc -false *tv*uc 


f 漏 | i 




i + Z 


for (var i = 0; i < seats.length; i++) { 

// See if the current seat plus the next two seats are available 
if (seats[i] && seats[i + 1] && seats[i + 2]) { 



*bruc 




-false 




*bruc 


-fal 


sc 


Finally, a manly seat fiwdcr 

Now Mandango correctly searches for a sequence of three 
available seats, resulting in a movie ticket service that even 
the toughest of tough guys will appreciate. 


The usev* is how 
f\roirhp-tcd -to a 

of thircc scats. 
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looping 


Pack to the treasure map 

With Mandango in good shape for the time being, we can return 
to the search for hidden treasure. Remember the treasure map? 


n s-teps. 


❺ Then, walk until you see a rock 
shaped like a piece of popcorn. 


o First, walk east for 
exactly 37 steps. 



A -Po\r loop haviga-ted 个 

the -Pi\rs-t fav-t Jc - 」 

the mas-tcv--Pully/ 


mark the spot! 


T\\t *tv-casiAV-c 
s*t»H WrU … 



A for loop worked great for navigating the first part of the map. 
The second part still remains, and it presents a challenge that 
doesn’t appear to be suited to the unique skills of a for loop. It’s 
difficult to set up a for loop counter when you have no idea how 
many repetitions are required of the loop. 




What’s the difference between the two parts of the 
search on the treasure map? How would you create a 
loop to traverse the second part of the map? 
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how long? a "while 


Looping for just a "while ••… until a 
condition is met 


Although it’s possible to create a for loop that walks the second part of 
the treasure map, there is a better option. Unlike the for loop, which 
is structured around the notion of a loop counter, the while loop 
is geared toward looping while a certain condition is met. And that 
condition doesn’t necessarily have anything to do with a loop counter. 


wkile loops let 
you repeat code 
wkile a certain 
condition is true. 


A while loop consists of two different parts: 


S*tc\>s I 2 - "take 
^ld£.e tiw'C 



o 

Test condition 


f 

o 

Action 




■■❺ ^ ■■❶ ^ ■■❻ ^ ■■❶ ^ ■■❻ 


Ov\t loop dy^lc. 



Test condition 

The test condition checks to 
see if the loop should cycle. 


Action 

The action part of the loop 
is the code that is actually 
repeated in each cycle. 


Applying the while loop to the second part of the treasure map results in 
some surprisingly simple code, at least as compared to a for loop: 


Test condition ❶ 

Only perform another 
loop cycle if the test 
evaluates to true, that is, if 
the rock is still not visible. 

?rockVisible 




Action o 


Gall the takeStep () 
function to take a step. 

takeStep () 


o 

while (!rockVisible) 
takeStep(); 

❺ 


Here’s how the different parts of this while loop work: 


❶ 

❻ 


Check to see if the rock is not visible. If not, move on to 
Step 2 and cycle through the loop. If so, quit the loop. 

Run the loop action code, which in this case means 
running the takeStep () function. 
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breaking down the while loop 


Much simpler in structure than for loops, while loops must still 
adhere to a predictable formula: 


丁 he dohdi 七 ioh, whidli >v»us 七 

evaluate -to tv-uc ov- -false. 



Action V 

( TV ad\ov\ {p fee 

_v-c\>ca*tcd, >/WiC.V) \s a sm— 

(ov to 个奶 d) staWeyrt. 




Watch it! 


Be careful with while 
loop test conditions. 

Since while loops don't 
have a built-in piece of 
code that updates the 
loop, you have to make sure there is 
code inside the loop that somehow 
affects the test condition. Otherwise, 
you risk creating an infinite loop. 




ExenciSe 


Rewrite the loop code from the film reel exercise that prompts the user to enter a number greater 
than 0, and then uses that number as the starting count for a loop that performs an old movie 
reel countdown (4, 3, 2,1， Roll film!). This time use a while loop instead of a for loop. 


var count = prompt("Enter a number greater than 0: n , "10"); 

if (count > 0) { 


else 

alert("The number wasn’t greater than 0. No movie for you !")； 
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exercise solution 



(u：tSe 

tytiOH 


Rewrite the loop code from an earlier exercise that prompts the user to enter a number greater 
than 0, and then uses that number as the starting count for a loop that performs an old movie 
reel countdown (4, 3, 2,1， Roll film!). This time use a while loop instead of a for loop. 


A/lakc suvc var count 



10 ，，）； 



Courrt dovm 

*to O. 


dour\*tcv-, but alcv-t( u S*tav-tm<j m."” + x); DcC\rertney\i 

i 七 is dvca*tcd __ "the ^ouhtc\r 

outside o-f ... — 办 pa\rt o( 

如 v/iiilc loop. ^ I - ---- the loop 


The loop 
d 匕七 | 。灼 is d 

匕 ompou 灼 d 

s-taierwe^-t. 


al^( w Roll : 


3s X-—X-■/ • 


else 

alert("The number wasn't greater than 0. No movie for you !")； 

Invalid data. 




The douh-fc 

I Roll film! 

1 rjj 


^^^^BULIET POINTS - 

■ The break statement immediately breaks out of a 
loop, skipping any remaining loop code. 

■ Boolean logic operators allow you to create powerful 
true/false logic for making decisions. 


■ The while loop runs a piece of code as long as a 
certain test condition remains true. 

■ Avoid an infinite loop by making sure the test condition 
is somehow affected by code within the while loop. 
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looping 


Use the right loop for the job 

The movie reel countdown exercise revealed that for loops and while 
loops are often capable of solving the same problems. In fact, any for 
loop can be reconstructed as a while loop using the following form: 


□ 



A wkile loop can 
cto every tiling a 
for loop can cto ， 
and vice versa. 


ou*bidc o^c 七 loop. 


So it’s technically possible to code the same loops using either for or 
while. Even so, you’ll find in the vast majority of cases that one of the 
loops clearly seems to work better in terms of the code making sense. 
Maybe it has something to do with elegance? 


Update takes 
withih the adtioh. 




These loops av-c 
v/cll suited *to 
pv-oblcms -they solve- 


Uo update- 



Choosing a for loop versus a while loop has everything to do with 
using the right tool for the job. In other words, the loop mechanics 
should fit the problem at hand. 
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for loop and while loop face off 


Fireside Chats 



Tonight’s talk： For loop and While loop try really hard to 
repeat themselves 


For loop: 

Ah, here we are, just a couple of repetitive fellas 
hanging out together. 


I’m not complicated at all, I just add a little more 
structure for creating certain kinds of loops. When 
people want to loop using some kind of numeric 
counter, they find comfort in how easy I make it to 
initialize and update the counter that controls me. 


Sounds kinda vague to me, although I suppose it 
could work. I like to be more exacting, you know, 
keep close tabs on what makes me tick. That’s why 
I make a special effort to initialize myself before I 
even start looping. I also keep myself updated at the 
end of each loop, just to make sure I keep running 
as expected. Guess I’m a little compulsive about 
making sure I repeat like clockwork. 


I am aware that there are lot of different ways to 
structure loops. I just like to run a tight ship. 


While loop: 


Yep. Although I have to say, I’m not that crazy 
about all the different steps involved in making you 
work. Seems kinda complicated to me. 


That’s true, but looping isn’t all about counting, you 
know. There are all kinds of cool loops that don’t 
even involve numbers. Sometimes you just need the 
simplicity of saying, “Hey，just keep doing this for a 
while.” That’s my kind of loop. 


While I applaud your work ethic, you do realize 
that it’s every bit as possible to loop reliably and 
predictably without all that formal initializating 
and updating stuff? Besides, I often repeat code 
in situations where there isn’t a need to initialize 
anything, and the updating takes place right there 
in the action code. So I’m content to do without the 
formality and just focus on the looping. 
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For loop: While loop: 

I suppose it really just comes down to style, and 
each loop has its own. You like to keep all the loop 
controls in their place, while I’m a little more casual 
about how I’m controlled. 

That’s true. The good news is that we both get the 
job done in our own way. And I can even see where 
my style is a bit much for a loop with simple logic 
controls. 

Now you’re talking! I think there’s room in this town 
for both of us after all. 

You can say that again! 

I think there’s room in this town... oh, I suppose 
instincts kicked in there for a moment. Sorry. 

No problem at all, I understand. Thanks for the 
chat. 


theretare no o 

Dumb Questi9ns 


The while loop looks pretty 
simple. Am I missing something? 

Not at all. Just keep in mind that 
simple doesn’t necessarily mean weak or 
limited. In other words, you may be surprised 
by how powerful while loops can be. 

Sure, the while loop consists solely of a 
test condition and a piece of action code, but 
that’s often all you need to do some really 
slick looping. Especially when you consider 
that the test condition can be made more 
interesting thanks to boolean logic operators. 
Not only that, but the action part of the 
while loop can contain as much code as 
you want if you use a compound statement. 

What happens if I created a while 
loop that started off while (true)... 
will it work? 


Yes, it will...perhaps too well.The 
problem is that you've just created an 
infinite loop because the test condition 
is permanently true. A while loop 
continues looping until the test condition 
evaluates to false, and in this case that 
time never comes. It's scary to think about 
how many infinite loops are running right this 
moment as you read this, destined to repeat 
themselves for ever and ever... and ever... 
and ever... hey, break out of it! 



Q/ Is it possible for the loop action 
code (the code in the parentheses) to 
never get called? 

Yes. Both for loops and while 
loops require their test conditions to be 
true before initially running the action 
code. So, if for some reason the test 
condition fails at the get-go, the action code 
won’t run and the loop exits before ever 
starting. 

Can loops be nested inside each 

other? 

Oh yeah! Nested loops allow more 
than one level of repetition. This sounds 
strange right now, but it’s quite cool. We 
explore nested loops later when Mandango 
grows to search an entire theater! 
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looping success 


Treasure at the end of the loop 


By using a for loop followed up by a while loop, 
the treasure map can be fully traversed, leading to the 
treasure at the spot marked X. 


o First, walk east for 
exactly 37 steps. 


A -Po\r loop haviga-ted 个 

-Pi\rs-t pav-t o( - 夕 

the map mas-tcv--Pully/ 


37 s-teps. 


o Then, walk until you see a rock 
shaped like a piece of popcorn. 



o X really does mark the spot! 


Movie tickets! 






Gould this be a sign? Your newfound while looping knowledge and 
movie tickets can only lead back to one thing... Mandango! 
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sharpen solution 


(^Jterpen your pencil 

Solution 


Rewrite the loop in the Mandango findSeats () function so 
that it uses a while loop instead of a for loop. Add a new loop 
control variable, finished, that is used as a means of exiting 
the loop through the test condition, as opposed to using break. 


卜 rtiar 丨 loop 
va\ri3blc* 


Loop as ds the loop 匕 ou 灼 "tev 
is less "the hurwbev* o-P 
AND u -f'mishcd W \SY\i tv-uc- 


This loop is somewhai o( a hybv-id o( whai we^ve 
scc>r> so (a>r \Y\ tha-t it is dcpc^dc^t OY\ both a 
匕 ouivt Bv\d a boolean loji£. c>^p\rcssioh. I^s usually 
simpler -to Code hybrid loops us'm^ while. 


y3V* I =1 Oj -f "misled .77.felsci — 

y/Wilc ((i < scatslc^t^) ff. 

.… /.y.. See if the current seat plus the next two seats are avulab e 

if (seats[i] && seats[i + H && seats[i + 2]) { 

/； Se t the seat selection and update the appearance of the sea 

• • • 

:: + ■■ through ” + ( 
n are available. Accept?"); 

. (i f 丄 、 f . 

. . .;. 

// TV^c uscy acu^itA tV)C scats, so wcVc .. 

fmislicd = : .. 

. 

鲁#參參 •_•••••_•■•***_***** 

else { . SO clear the seat selection and keep looking 

// The user rejected the 匕丄 

• • • 

// Increment the loop counter 

"»++； 


Imvcwc 灼七 
I oo^ C.ou^'tcV'- 


Set u -fihishcd w *to tvuc *to bail 
out o( the loop. Sih^e this 
a-Pfc^ts the -test ^Ohditioh, 
thcv-c^s y\o v\tcd -fco bveak hcv-c- 
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Jason’s right. Mandango really needs to be able to handle more rows of 
seats in order to truly be functional. Thus far the single row of seats has 
made sense because it cleanly maps to an array of booleans representing 
the seat availability. To expand the idea to multiple rows of seats requires 
expanding the array, and that requires another dimension. That’s right, 
we’re talking about a two-dimensional array! 


Mandango is looking pretty sweet with the 
looping and all but there aren't really many 
theaters with only one row of seats. We need 
to figure out how to handle more rows... 


Movie seat data modeling 


rOWS 7 wiih hihC sc3is 

… 從 h ir OW . /cah, i-t S toiy! 


We need an array that is 9 x 4 in size to match up with the actual seats 
which are four rows with nine seats in each. 


Kov/ is 

ano*tV^cv- diw'C^s'io^ 

0 
1 
2 
3 


-tKc Z-P a^ay 

is still 3 bool can¬ 
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more than one dimension 


Aw array of aw array: two-dimensional arrays 


You don’t need any special glasses or anything to create a two-dimensional array. 

In fact, creating a two-dimensional array is similar to creating a normal (one¬ 
dimensional) array except that you create multiple sub-arrays as elements of the 
array. These sub-arrays are what add the second dimension, resulting in a table of 
data that has rows and columns. 


Then Cy'tdihc sub—3v*v*3ys "to scv*vc 
as dcmch-ts \y\ the outev av-v-ay. 
Tll3"t s "two d\n\tY\i\OY\sl 


pivs 七 ertait ^v\ avray *to iiousc i\\t 

sub-av-v-ays. TiiaVs ov\t dimCr\sior\f 



var seats = new Array(new Array(9), new Array(9), new Array(9), new Array(9)); 



Fou\r sub-3\r\rays v-csult \y\ 
-fouv- \rows o( av-v-ay data. 

In the case of Mandango, we already know the initial values of the array 
elements, so it makes sense to use a different approach to create the 
2-D array, one that involves an array literal. This creates the array and 
initializes it at the same time — a win-win situation! 


Poublc Watkc*b 

*md'»£.a*tc a 2--P av ' v * a Y , 


var seats = [[ false, true, false A true, true, true^ false, true, false ], 
[false, true, false, false, true, false, true, true, true ], 

[true, true, true, true, true, true, false, true, false ], 

[true, true, true, false, true, false, false, true, false ]]; 


sub— 


has i*ts 


The -f'iv-s*t r»s*t boolean 
values is i\\c v-ov/ 
o*f 2-—P 3V"V*3y* 


own 


5v-vay 


ihdex, ih this C3isc 

betweeh 0 ahd l. 



° n 1 


0 


1 


2 



False - scat 一 ^ 
is alvcady 


TVue — the scat 
is available. 
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looping 


Two keys to access Z - V array data 


Accessing data in a 2-D array is no different than accessing a 1-D array 
except you have to provide an additional piece of information: the index 
of the extra array. More specifically, you specify the indexes of the row 
and the column where the data sits in the array. For example, to grab the 
value of the fourth seat in the second row of seats, use this code: 


Two-ctimensional 
arrays allow you to 


The ihdcx o( ihc stCov\d v-ow \y\ 
the a\r\ray is / Cs-bv-ts ai O). 


store tabular data* 



alert(seats[1][3]); 


Tv/o dlW'C^SlOl^S. 


dirhehsi 


oh. 


T\\t mdc% O^c *tv^c 
-fourth elemerrt m a v-oy/ 
is 1> (s*tav*ts a*b O)- 

Looping through an array with more than one dimension involves nesting 
a loop for each dimension. So, looping through a 2-D array involves a 
total of two loops, one inside the other. The outer loop cycles through the 
rows of array data, while the inner loop cycles through the columns within 
a row. 

loops dllow you 
■to iterate though -two 
dimehsiohs o( data. 


Columns 


Rows 





MM 







rpen your pencil 


Write code to loop through the seats in the 2-D seats array, 
alerting the user to the availability of each seat. 


you are here ► 
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sharpen solution 



en your pencil 
Solution 


Write code to loop through the seats in the 2-D seats array, 
alerting the user to the availability of each seat. 


T\\c outcv- loop 乙 ydes 

\roy/s o-f scats 

us'm^ tiic i loop ^our\*tcv-. 


The iKmev loop dydlcs 
thiroujh -the seais \r\ a v-ow 
usihj "the j loop douivtev. 


TWis is *tVic lc^*b^ 

of sub—av~v"ay 

located a*t v-ov/1. 


-fov- (va\r i — O ； i < scats.Icir»3*th ； i++) { 


I 七 "takes -two hes-ted 
loops "to loop -tliv-ough 

- ( . vav ： j.r.Ji < j ++?.[ 

\( (scatsr.]C\ 3 ) 



To access an mdwidual 
scat use both 七 he 

ro^i (i) dytd toluwm (j) 

i\\t array data. 



Display a di^cv-c^-t alcv-t 
based upoh whethev- -the 
sc3*t is dvdildblc ("bruc) ov 
K>o*t f-false). 


alcv-*t( w Sca*t w + i + w *m \rov/ w + \ + w is available.^); 


alcv-*t( W Sca*t ” + i + ” m \rov/ W + j + W is y\oi available-^); 


The scat ava'ilabilrty 
messages show *tKc vo>w 
dr>d dolumia o-f C3dK scat 


tlieretare no o 

Dumb Questions 


Can arrays be more than 2-D? 

J\. Yes, although at some point it can 
get tricky to visualize the data. Three 
dimensions can be handy for modeling 
real-world data such as the x-y-z coordinate 
of a point in space. Beyond that, additional 
dimensions are probably relegated to very 
isolated situations. When adding another 
dimension, just think in terms of replacing 
individual array elements with sub-arrays. 


Can I add additional data to an 
array later if I initialize it with data upon 
creation? 

Absolutely. You’re always free to add 
more data to an array by assigning new data 
to an unused array element. In the Mandango 
example, you could add another row of seats 
by adding a new sub-array as a fifth row (at 
index 4 in the array). Just assign the sub-array 
to seats [ 4 ]. You can also call the 
push () method of the Array object to 
add a new item to the end of an array. 


Do 2-D arrays have to contain the 
same number of rows? 

No, not exactly. Just keep in mind that 
if the rows don’t contain the same number 
of elements, you’re setting up a recipe for 
looping disaster because nested loops 
are typically designed to cycle through a 
consistent sub-array length. So, yes, it’s 
possible to vary the length of 2-D array rows, 
but it’s a risky proposition that’s safer to 
avoid. 
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BULLET POINTS - 

■ Two-dimensional arrays allow you to store rows and 
columns of data in tabular structures. 

■ When accessing an individual piece of data in a 2-D 
array, you must specify both the row and column of the 
index. 


■ Nested loops can be used to iterate through the data in 
a 2-D array. 

■ Just like normal arrays, 2-D arrays can be created and 
initialized from array object literals 


Mandango m t-V 

Although you’ve already worked through pieces and parts of the code, 
moving Mandango from a single row of seats to a full theater of seats 
involves reworking a great deal of the script code to account for 2-D data. 









In what different ways do two-dimensional arrays impact Mandango when it changes to work 
on an entire theater of seat data? How would you visualize the script code? 


you are here ► 
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2-D glasses not needed for this code 



<html> 

<head> 

<title>Mandango - 


2-D JV[an Janga Up Cl^se 


The Macho Movie Ticket Finder</title> 


No "to VlSU^Ii>g 

_ -the Complete Code 

W Z-p /Wahdahjo/ 


<script type: 
var seats = 


'> 


'text/j avascript' 

[[false, true, false, true, true, true, false, true, false ] 
[false, true, false, false, true, false, true, true, true ] 
[true, true, true, true, true, true, false, true, false ], 


var selSeat 


[true, 
- 1 ; 


true, true, false, true, false, false, true, false ]] 



function initSeats() { 

// Initialize the appearance of all seats 
for (var i = 0; i < seats.length; i++) { 

for (var j = 0; j < seats[i].length; j++) { 
if (seats[i][j]) { 

// Set the seat to available 
document.getElementByld("seat" + (i 
document.getElementByld("seat" + (i 

} 

else { 

// Set the seat to unavailable 
document.getElementByld("seat” + (i 
document.getElementByld("seat" + (i 


- P ^ 

boolean scat ava ， laW’t7 
vav"»3blcs dveated- 


mandango.html 


seats[i] .length + j ) ) . sre 
seats[i].length + j)).alt 


'seat—avail.png" 
'Available seat" 


seats[i].length + j)).sre 
seats [i] .length + j)) .alt 


'seat—unavail.png" 
'Unavailable seat" 


function findSeats() { 

// If seats are already selected, 
if (selSeat >= 0) 
selSeat = -1; 
initSeats (); 

} 


^initialize all seats to clear them 


Rcihi-tialiiC the scats i-f 
the usc\r is s-ta\rt'mg a hew 
scairdh -Po\r scats by didkmg 
the Fihd Scats butfcoh 


// Search through all the seats for availability 
var i = 0, finished = false; 
while (i < seats.length && !finished) 

for (var j = 0; j < seats[i].length; j++) { 

// See if the current seat plus the next two seats are available 
if (seats[i] [j] && seats [i] [j + 1] && seats[i] [j + 2]) { 

// Set the seat selection and update the appearance of the seats 



Taki^ o( best o( both 

worlds, a while I oof is used *to dydlc 
七 hvou# vows, while a TOV* I oof dydlcs 

七 hvou# mdividudl scats m a vow. 


selSeat = i * seats[i].length + j; 

document.getElementByld("seat" + (i * seats[i].length + j)).sre = "seat 一 select.png"; 
document.getElementByld("seat" + (i * seats[i].length + j)).alt = "Your seat"; 
document.getElementByld("seat" + (i * seats[i].length + j + 1)).sre = "seat_select.png"; 

document.getElementByld("seat" + (i * seats[i].length + j + 1)).alt = "Your seat"; 

document.getElementByld("seat" + (i * seats[i].length + j + 2)).sre = "seat—select.png ”； 

document.getElementByld(”seat" + (i * seats[i].length + j + 2)).alt = "Your seat"; 


// Prompt the user to accept the seats 

var accept = confirm("Seats " + (j + 1) + " through " + (j + 3) + 

"in Row " + (i + 1) + " are available. Accept?"); 
if (accept) { 

// The user accepted the seats, so we're done (break out of the inner loop) 

finished = true; 

break; 

} 

else { 
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II The user rejected the seats, 
selSeat = -1; 

document.getElementByld("seat" + 
document.getElementByld("seat" + 
document.getElementByld("seat" + 
document.getElementByld("seat" + 
document.getElementByld("seat" + 
document.getElementByld("seat" + 


so clear the seat selection and keep looking 


(i 

(i 

(i 

(i 

(i 

(i 1 


seats[i] .length + j) ) .src 
seats[i].length + j)).alt 


"seat—avail.png"; 
"Available seat"; 


seats [i] .length + j + 1)) .src 
seats [i] .length + j + 1)) .alt 
seats [i] .length + j + 2)).src 
seats[i].length + 


j^^2) ) .alt 


'seat—avail.png' 
'Available seat' 
'seat—avail.png' 
'Available seat' 


// Increment the 
i++; 


outer loop counter 


</script> 
</head> 




<body onload="initSeats() 
<<div style="margin-top 
<img id="seatO" src=" 
<img id="seatl" src= 
<img id="seat2" src= 
<img id="seat3" src= 
<img id="seat4" src= 
<img id="seat5" src= 
<img id="seat6" src= 
<img id="seat7" src= 
<img id="seat8" src= 
<img id="seat9" src= 
<img id="seatlO" src 
<img id="seatll" src 
<img id="seatl2" src 
<img id="seatl3" src 
<img id="seatl4" src 
<img id="seatl5" src 
<img id="seatl6" src 
<img id="seatl7" src 
<img id="seatl8" src 
<img id="seatl9" src 
<img id="seat20" src 
<img id="seat21" src 
<img id="seat22" src 
<img id="seat23" src 
<img id="seat24" src 
<img id="seat25" src 
<img id="seat26" src 
<img id="seat27" src 
<img id="seat28" src 
<img id="seat29" src 
<img id="seat30" src 
<img id="seat31" src 
<img id="seat32" src 
<img id="seat33" src 
<img id="seat34" src 
<img id="seat35" src 
<input type 
</div> 

</body> 

</html> 


'> 


The ihi-tScatsO 

is called when 
the page -Pi\rs-t loads. 


T^C V-OVi dwd CoW^Y\ loop 
to\Ar\icrs avc v-c<\u'»v-cd -to 
scat 

dy\d al*tcv-y\a*tc 七亡此 


o 


: 25px; text-align : center"> 
alt= 
alt ； 
alt ； 
alt ； 
alt ； 
alt ； 
alt ； 


alt= 

alt= 

alt= 

alt 

alt 

alt 

alt 

alt= 

alt 

alt 

alt 

alt 

alt 

alt 

alt 

alt 

alt 

alt 

alt 

alt 

alt 

alt 

alt 

alt 

alt 

alt 

alt 

alt 

alt 



> 



, VW i, vov/s 

sca*U ^ 

HTML images - yikcsf 


Don’t be 
intimidated by 
the sheer size 
of this code. 

It’s using the same 2-D array 
techniques but now it’s folded into 
the context of Mandango, with all 
of the HTML code and images 
(which is all available for download 
at http:/ / www.headfirstlabs.com/ 
books/hjjs/). 


The -PihdScatsO 
-Puh^-tioh is called wheh 

the usev titles the 


'button" id="findseats" value="Find Seats" onclick="findseats();" /> 
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doing the mandango tango 


Aw ewtirc theater of manly seats 



With two dimensions to work with, Seth and Jason are able to take 
Mandango to the next level and support theater-wide seat searching., 
with a macho twist! The guys are stoked. 


how o-ffevs 
movie^oevs a 
C\\o\Ct o-P thvee scats ih 
a \row within a -theatev 
o( optiohS. 


Wicked! 




A 


Swta ? Through 4 in Rnw 1 arp avalhhlp. ArrepP 


Cancel 


hf r 




Pinil vr jI I 
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JavaScPiptcposs 

All this talk about seats probably has you itching to 
go see a movie. Before you leave, do a little mental 
stretch and take a stab at this crossword puzzle. 



Across 

2. This kind of loop keeps on running code as long as a test 
condition is true. 

4. Use this statement to jump out of the current loop cycle but 
continue looping. 

8. If a is true or b is true, then a.. b is true; otherwise a.. b is 
false. 

9. A type of data that lets you store multiple pieces of data in a 
single variable. 

10. The part of a loop that contains the code to run repetitively. 

11. The part of a loop that gets the loop ready to start. 

13. A type of loop that is ideally suited for counting. 


Down 

1. The part of a loop that must have a boolean result. 

3. A... is used to access a value in an array. 

5. Boolean "… operators operate on boolean values and return 
a boolean result. 

6. The part of a loop that is responsible for changing the state of 
any loop controls. 

7. If you want to end a loop immediately, use this statement. 

10. If a is true and b is true, then a... b is true; otherwise a... b 
is false. 

12. Accessing an array value using a number requires an ...... 
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JavaScriptcross solution 



JavaScPiptcposs Solution 
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looping 



V 嫩 


Fold the page vertically 
to line up the two brains 


Wliat do loops anct movies kave in common? 


and solve the riddle. 



I Vs a mcctmg o-f m’mds, <r 




Some movies are known lor kavingf circular 
plots tkat are ctiHicult to follow. 

Tkere are otker movies tkat use motion 
and lots oi action to attract people. 

In tke end, a movie is just a movie. 
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6 functions 



Reduce ， Reuse，Recycle 


That’s the thing about meatloaf, 
you cook it once and then 
eat it for weeks and weeks... 
somebody help me! 


If there was an environmental movement within JavaScript, it 

WOUld be led by functions. Functions allow you to make JavaScript code more 
efficient, and yes, more reusable. Functions are task-oriented, good at code organization, 
and excellent problem solvers. Sounds like the makings of a good resume! In reality, all 
but the simplest of scripts stand to benefit from a functional reorganization. While it’s hard 
to put a number on the carbon footprint of the average function, let’s just say they do their 
part in making scripts as eco-friendly as possible. 


this is a new chapter 
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dissecting big problems 


The mother of all problems 

When it comes down to it, web scripting is about solving problems. No 
matter how large the problem, with enough thought and planning, 
there’s always a solution. But what about the really huge problems? 


World peace 



The trick to solving big problems is to break them down into 
smaller, more manageable problems. And if those problems 
are still too big, then break them down again. 




Continue this process again...and again...and again... 
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Solve big problems by solving small problems 


Continuing to break down the world peace problem into smaller problems, you 
eventually arrive at a problem that is small enough for JavaScript to handle. 



A good pvoblcrw that 
is withih the \rcaU of 
3 solutioh. 



Think of a JavaScript equivalent to the climate control problem, 
which would involve the scripting equivalent of a thermostat, 
which is used to control the temperature of an environment. The 
most basic thermostat would simply have a “heat” button. 


HEAT FIRST 


TVic cas'ics-t *tVicv-mos*ba*t 

cw* - lou 七灼 

dy\d i-b ^ocs. 




V^u dov\i ^a\rc how 
"the hcatihg is doy\t) 
you ohly heed -to khow 
how "fco tuv-h it Oh. 


Note how the thermostat reveals nothing about how the heating is 
carried out. You press the Heat button and you get heat. Climate 
control problem solved! 
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functions: small problem solvers 


Functions as problem solvers 

The Heat button on the thermostat is the equvalent of a function in 
JavaScript. The idea is similar to a real-world thermostat — someone 
requests heat, the function provides it. The details of the heating are 
handled inside the function, and aren’t important to the code calling 
the function. In this way, you can think of a function as a “black box ” 一 
information can flow into it and out of it but what goes on inside is the 
box’s responsibility, and therefore not important to code outside of the box. 


Functions turn 
problems into 
small problems. 


Request heat 



It gets warmer 


Translating the Heat button into JavaScript code involves calling a 
function called heat ()... 


Request heat 


heat(); 


It gets warmer 


TliC pC\rsoh who y/\ri-tcs -the 

is the ohly 

pC\rsoh who hds -fco y/ovv-y 
3bout how the (uh^tioh heat 



who wahts heat jus-t 
J^ccds -to khow how -to ^all -the 
hcatO -Puhdtioh. 


TV atW kat •… V s 
tWcc oi\\Cr WW S . 


It’s not terribly important how the heat () function does the heating. 
What matters is that it serves as a self-contained solution to a problem. If 
you need some heat, just call the heat () function. The details of solving 
the problem are left to the inner workings of the function. 
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The wuts and bolts of a fuwctiow 


When you elect to create a function, you become the problem solver. 
Creating a function requires you to use a consistent syntax that ties the 
name of the function with the code that it runs. Following is the syntax for 
the most basic JavaScript function: 

idchti-pic\r that uses 

S*bav**b a ，— lowcv-CamcICasc- 

keyword. 





I/V\raj> up "the -Puhdtioh 
with a ^los'mg ^uirly bv-a^c. 


T\\t body of 七 he 

is dll 

七 he >wo\rk *bakcs 


丁 lie dodc a 

is vcally pa\rb o-f a ^ompour\d 
sta 七七， s*t3v~"ts 
y/i-bK a duvly bva^c- 


Rav-chthcscs av~e a 
tell-tale sigh that 
this is 3 •fuhd'tioh. 


Taking another look at the code for the heat () function helps put the 
function syntax into some perspective: 



T\\t body o( -biic 

docs 

adiudl V^catmj. 



function heat() { 々 


// Do some heating somehow 
shovelCoal(); 
lightFire(); 


harnessSun() 



丁 he -fuh^-tioh body is 
su\r\rouhdcd by duv-ly 
b\radcs - it's \rcally jus-t 
a ^ompouhd s-tatc^cht 



When have you seen functions used to solve problems so far? 
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A fuwctiow you've already met 


You don’t have to look any further than the Mandango macho seat finder 
(full files available at http:/ / www.headfirstlabs.com/books/hj^s/.) script to 
find a good example of a function solving a problem — in this case, the 
problem of initializing movie seat data. Here’s how the Mandango 
problem was broken do^rrr — M 

矽 $ problem. 



Smallcv- pvoblcrus. 



The seat initialization sub-problem was small enough to be solved with a 
function, the initSeats () function: 


function initSeats() { 

// 工 nitialize the appearance of all seats 


for (var i = 0; i < seats.length; i++) 
for (var j = 0; j < seats[i].length; 

if (seats[i][j]) { . 

// Set the seat to available 
document•getElementByld("seat" + 
document.getElementByld( n seat + 

} 

else { . 

II s e t the seat to unavailable 

document.getElementByld("seat — 
document.getElementByld("seat ^ 


{ 

j++) 


(i 

(i 


(i * 
(i * 


seats[i].length + j))• src 
seats[i]•length + j ) ) .alt 


seats[i].length + j)) 
seats[i].length + j)) 


,src 
,alt 


’seat_avail.png 1 
’Available seat 1 


1 seat_unavail.png 1 
▼Unavailable seat’ 


The initSeats () function is part of the Mandango web page. The 
function doesn’t get called until it is tied to the onload event handler. 
This causes the function to 



p\roblerh solves ih 


<body 

onload= fl initSeats () ; n > 

<div style="height:25px"X/div> 

<div style="text-align:center ”〉 

<img id="seat0" src="" alt="" /> 

” oncl.C-f.ndSeatsO 

</div> 

</body> 

</html> 
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tJiereicire no o 

Dumb Questions 


How does the naming convention 
for functions work again? 

lowerCamelCase is a convention for 
naming JavaScript identifiers where the 
first word in an identifier is all lowercase 
but additional words are mixed case. So, a 
function that rates a movie might be called 
rateMovie (), while a function that 
kicks out a guy who insists on talking on his 
mobile phone during a movie might be called 
removelnappropriateGuy() ■ 

Are functions always about turning 
big problems into smaller problems? 

Not necessarily. There are situations 
where functions are helpful purely as a 
division of coding labor. In other words, it 
may be one problem being solved by 


several functions working together. In this 
case, the rationale for dividing up the code 
into functions is to help divide the work and 
give each function its own singular purpose. 
Kind of like how people are given different 
job titles so that they can each focus on 
one specific type of task. Such functions 
may or may not be solving unique problems, 
but they definitely improve the structure of 
scripts by dividing up the work. 

How do you know when a chunk of 
code should be placed into a function? 

Unfortunately, there is no magical way 
to know when it makes the most sense to 
place a piece of code into a function. But 
there are some signs you can look for as 
clues. One sign is if you find yourself 
duplicating a piece of code. Duplicate code 


is almost never a good thing because 
you have to maintain it in more than one 
place. So duplicate code is a great target 
for placing in a function. Another sign is a 
situation where a piece of code grows to 
become unwieldy, and you’re able to make 
out several logical parts to it. This is a good 
time to apply the “division of labor” idea to 
the code, and consider breaking it out into 
multiple functions. 

I thought I remember seeing 
functions that accepted arguments and 
then passed data back. Am I missing 
something? 

No, not at all. There certainly are 
functions that both accept and return data. 
In fact, you’re about to see the heat () 
function turn into one if you hang in there. 





The name of a function is extremely important in immediately conveying what the function does. 
Try your hand at naming these functions, making sure to use lower camel case. 


Request aisle seat > 



> Receive ticket for aisle seat 


Ask for refund 



Receive refund 


Throw popcorn 
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exercise solution 



RctSe 

Lytion 


The name of a function is extremely important in immediately conveying what the function does. 
Try your hand at naming these functions, making sure to use lower camel case. 


Request aisle seat 


Ask for refund 


Throw popcorn 





Receive ticket for aisle seat 


\rc 


<\ucs*t/\islcSca*tO 


Receive refund 





Popcorn is hurled at others 

■tWov/Pop 乙。浐灼 0 


The\re 扣 e plc^y o( othc\r -Pu^^ioh 七 hal would wov-k h 饮 e., 

These arc just some good examples o( cou\sc, lowcv- cast v\a^cs. 


rm burning up! Please turn the 
heater off. Or am I feeling 
the effects of local warming? 


Ahh, this is comfy. 


O 


o 



Too hot to handle 

Meanwhile, the effort to bring about world peace 
through climate control has hit a bit of a snag. It 
seems the Heat button works too well, or maybe 
it’s just a problem of the heat () function needing 
more data. Either way, something needs to be fixed. 
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Puild a better thermostat with more data 

So back to the thermostat.. .It doesn’t know when to stop heating because 
we never set a target temperature. There simply isn’t enough information 
to solve the problem effectively, which means someone presses the Heat 
button and they get heat... forever! 




HEAT FIRST 



The Tcmpcvatuv-c khob 
allows the usev- io sei 
a "tavge 七 -tcmpcv-atu^c. 


The improved thermostat now accepts the target temperature as 
an input that it can use to better carry out the “heat” process. 


Target 

temperature 

Request heat > 

TW iar^e-k / 

-tcwfcv-aWc - - 

sewes as 办 
•m*to *tv^c *fuv\6*t'»ov\. 



heat(targetTemp); 


^ It gets warmer 



Write the code for an improved heat () function that accepts a target temperature and uses 
it to only generate heat while the current temperature is less than the target temperature. 

Hint: call the hypothetical getTemp () function to get the current temperature. 


added a Imc 

^c*b 矿七亡丄 
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exercise solution 



Write the code for an improved heat () function that accepts a target temperature and uses it 
to only generate heat while the current temperature is less than the target temperature. Hint: call 
the hypothetical getTemp () function to get the current temperature. 




TV tavy 七 tcmfcraW is 
^dssed m*bo 3s 

d -Puir\t*bioK\ 


v/hilc < -tav-jctTcmp) { 


// Do some hcatmj somehow 


s 


hovcICoalO; 


"The -Puhd*tioh how ohly 
i-p du\r\r(h'b 
tcrupcv-atuv-c is less -thah 

ik target tcmpcv-atuv-c. 


ha\r^cssSui^O ； 


TWc. •刪吐 


Passing iwformatiow to fuwetiows 


Data is passed into JavaScript functions using function arguments, 
which are like inputs. Look again at the syntax for functions; see how 
arguments are placed inside the parentheses when you create a function 



W\h\\Y\ body o( a 
av^iAmc^*bs av"c addessed as i-f *t^cy 
av«c m’rbial»zjcd lodal vav-iaklcs. 

There isn’t really a limit on the number of arguments you can pass 
into a function, although it makes practical sense to try and keep 
them to within no more than two or three. You can pass just about 
any piece of data to a function as an argument: a constant (Math . 
PI), a variable (temp), or a literal (72). 



^ hC OY 代 avgumchts 

appeam msidc -the 
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Fuwctiow arguments as data 

When data is passed into a function as an argument, it acts as an 
initialized local variable inside the function. As an example, here the 
heat () function is getting supplied with a target temperature that is 
passed to the function as an argument: 

— ^ TV iaryi 七 emfeva 七 uve is passed 

heat (72) ; as d liteval 


Inside the heat () function, the tar get Temp argument is accessible as 
if it was a local variable initialized to 72. Replacing the normal heat () 
function code with an alert reveals the argument value. 



function heat(targetTemp) { 
alert(targetTemp); 


Inside "the 

"the av-gur^ch-t looks just 

like a lodal variable- 


the -Puh^-tioh exits, 
joes awdy. 






Although function arguments act much like local variables from within a 
function, changing an argument value inside a function does not affect 
anything outside of the function. This rule does not apply to objects that 
are passed as arguments — we’ll dig into objects in Chapters 9 and 10. 


var temp = 
coollt(temp); 
alert(temp); 


"The v^lridble is 
passed ih-to the -Puhdtioh 
3s 


SiAb-tv-att I 
i\\t tcmpcv-aWc. 


tve 灼七 ho— 

-tKc *tc^\>cv-a*tuv-c 
3v^uw'C^*t 3l*tcv*cd 
mside 七 ’Kw, 

七 he ou*b'idc vav'»ablc 
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removing duplications with functions 


Functions eliminate duplicate code 


In addition to breaking down problems so that they can be solved more 
easily, functions serve as a great way to eliminate duplicate code by 
generalizing tasks. A generalized task can be used to eliminate similar 
code that appears in more than one place. Even though the code may 
not be identical, in many cases you can generalize it into identical code 
that can be placed in a function. Then you call the function instead of 
duplicating similar code. 

Following are three different pieces of code that all involve similar tasks 
that could be generalized into a single, reusable task: 


TV d\sCo\AY\i pcvtcrrbay 
^al^ula*tior\ is urmetessavily 



The specific tasks involve calculating the prices of three different kinds of 
discounted movie tickets. But these tasks can be generalized into a task that 
involves calculating the price of a ticket based upon any discount percentage. 





ADMIT 
on r- 



With a generalized ticket discount function in hand, the other three pieces 
of code can be rewritten much more efficiently: 



// Matinee ticket is 10% less 

matineeTicket = discountPrice(adultTicket, 10) 


s 


Senior ticket is 15% less 
ImorTicket = discountPrice (adultTicket, 15) 



childTicket = discountPrice(adultTicket, 20); 
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BE • E^JcJmcy E^erf 

Below is tire find|Seats() function from the 
Mandango mcho seat finder in all its 
prior glory. Using your newfound 
efficiency l^nowled^e, circle 
Similar code tiiat could he 
rewritten as a generalized, 
reusable function. 


function findSeats() { 

// If seats are already selected, reinitialize all seats 
if (selSeat >= 0) { 

selSeat = -1; 
initSeats(); 



// Search through all the seats for availability 

var i = 0, finished = false; 

while (i < seats.length && !finished) { 

for (var j = 0; j < seats[i] .length; j ++) { 

// See if the current seat plus the next two seats are available 
if (seats[i][j] && seats[i][j + 1] && seats[i][j + 2]) { 

// Set the seat selection and update the appearance of the seats 
selSeat = i * seats [i] .length + j; 

document•getElementByld( n seat n + (i * seats[i] .length + j)) .src = M seat_select.png"; 
document•getElementByld( n seat” + (i * seats [i] .length + j)) .alt = "Your seat"; 
document•getElementByld( n seat n + (i * seats [i] .length + j + 1)) .src = M seat_select.png"; 

document•getElementByld( n seat n + (i * seats [i] .length + j +1)) .alt = "Your seat"; 

document•getElementByld( n seat n + (i * seats [i] .length + j + 2)).src = M seat_select.png"; 

document•getElementByld( n seat n + (i * seats[i].length + j +2)).alt = "Your seat"; 


// Prompt the user to accept the seats 

var accept = confirm( M Seats M + (j + 1) + M through M + (j + 3) + 

M in Row M + (i + 1) + M are available. Accept? M ); 
if (accept) { 

// The user accepted the seats, so we're done (break out of the inner loop) 

finished = true; 

break; 


else { 

// The user rejected the seats 
selSeat = -1; 

document.getElementByld("seat" 
document.getElementByld("seat" 
document.getElementByld("seat" 
document.getElementByld("seat" 
document.getElementByld("seat" 
document.getElementByld("seat" 


so clear the seat selection and keep looking 


+ (i * 
+ (i * 
+ (i * 
+ (i * 
+ (i * 
+ (i * 


seats[i].length + 
seats[i].length + 
seats[i].length + 
seats[i].length + 
seats[i].length + 
seats[i].length + 


j ) ) . src = ’’seat—avail .png ’’； 
j)).alt = "Available seat"; 
j + 1) ) .src = n seat—avail • png ’，； 
j + 1)).alt = "Available seat"; 
j + 2)).src = n seat—avail•png ”； 
j + 2)).alt = "Available seat"; 


// Increment the outer loop counter 

i ++； 
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be the solution 



BE . E^cjency §©]ug©n 

Below is tire findSeatsO function from the 


Below is tire find|Seats() 

Mandango macho seat finder in all its 
prior ^lory. Using your newfound 
efficiency l^nowled^e, circle 
Similar code tiiat could be 
rewritten as a generalized, 
reusable function. 


function findSeats() { 

// If seats are already selected, reinitialize all seats to 
if (selSeat >= 0) { 

selSeat = -1; 
initSeats(); 



Cl 


// Search through all the seats for availability 

var i = 0, finished = false; 

while (i < seats.length && !finished) { 

for (var j = 0; j < seats[i] .length; j ++) { 

// See if the current seat plus the next two seats are available 
if (seats[i] [j] && seats[i] [j + 1] && seats[i] [j + 2] ) { 

// Set the seat selection and update the appearance of the seats 
selSeat = i * seats [i] .length + j; 

i *~~seats LiJ •-Lengtn + jjj.src : 


aocument.getElementByld( n seat n + 

ij.ocument. cfetElementByld ( n seat" + 


document.getElementByld( n seat" + 
locument. aet-ElementBvId ( n seat" + 


document•getElementByld( n seat n + ( 
-dncnment. getElementBvTd ( M t. M +. 


■k 


seats[i]•length 


)).alt 


'seat select•png 

'Your seat 


* seats[i].length + 

* seats Til .length + 


l 


l 


* seats[i].length 

* .spa ts T i 1 . length 


1)).src = M seat_select.png 

1) ) . alt = ’’Your seat 

2) ).src = M seat_select.png 
2) ) . alt = ’’Your s^eai 


// Prompt the user to accept the seats 

var accept = confirm( M Seats M + (j + 1) + M through M + (j + 3) + 

M in Row M + (i + 1) + M are available. Accept? M ); 
if (accept) { 

// The user accepted the seats, so we're done (break out of the inner loop) 

finished = true; 

break; 

} 

else { 

// The user rejected the seats, so clear the seat selection and keep looking 
selSeat = -1; 



Sihdc "these six 
pieces todt 
pC\r-fo\rm the same 
3 ⑽ \ral -bsk, they 
匕 ah be tuv-hed ih-to 
3 *Puhd*tioh. 



ocument. getL 丄 emenniiy 丄 d { "sear" 

document.getElementByld("seat" 


(1 "* Lib [ 丄 ] • lyiiy Lli— = t B ― 」 ）） .j. u 

(i * seats[i].length + j)).alt 


'aeciL civail .png' 

'Available seat' 


document. getElementbyia ("seat" ~ (i 卞 seats Li 」 • 丄 engtri 十 

—document. qetElementByld (’’seat” + (i * seats [i] . length + 

cument.getElementByld("seat" + (i * seats Li」.length + 

cument. getElementByld (’’seat” + (i * seats [i] . length + 


i ;) .src 
1)).alt 


1 seai:_avaii. png 
'Available seat 


2)) .src 
2)).alt 


▼▼ seat—avail • png 
"Available seat 


// Increment the outer loop counter 

i ++； 


The fv-ofc\rty still v/o\rb -fov 

-tKc v>umbcv <^f 'rtcw'S *m d sub-av-vay. 



Puplida-tc dodc. Wc 
Uh cx-t\radt some 
atbributes -fv-om this... 
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Creating a seat setter fuwctiow 


Now that the Mandango guys have gotten wind of this efficiency stuff, 
they’re fired up about adding a function to Mandango that makes the seat 
setting code more efficient (code available at http:/ / www.headfirstlabs.com/ 
books/hjjs/). In order to write the setSeat () function, however, they 
really need to figure out what arguments are required. You can isolate 
the necessary arguments by examining what pieces of information are 
different in the duplicate code. A closer look at the duplicate parts of the 
f indSeats () function reveals these arguments: 


Scat Number 

The number of the seat to be set. 

This is not an array index; it ? s just the 
number of the seat if you were to start 
counting from left to right and top to 
bottom, starting at 0. 


The -fihdScatsO attributes 

a 代 t^bra^itd -Pv-o^ the 

duplicated todt that will 
be placed ih the 


Status 

The status of the seat, as in available, 
unavailable, and selected. This is used 
to determine what seat image to display. 




Pcscriptiow 

The description of the seat status, as in 
“Available seat”, “Unavailable seat", and 
“Your seat”. This is used to set the alt 
text for the seat images. 





Write the code for the Mandango setSeat () function. 
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reusing mandango code 


r^lj^rpei your pencil 


The daia used 

the o\rig*mal todt 
is how \rcpla^cd by 
gchciraliicd av-gumchts. 


Write the code for the Mandango setSeat () function. 


T\\t tiiv-cc av^umer\*b ave 
sepava 七 ed by dommas. 



-fuir\d*tioir\ sc*tSca*tfsca*tNum； s*ta*tus, dcs^v-ip*tio^) { 
dodumc^ty-tElcmc^-tByldr'sca-t^ + sca*tNum).sv-d — w sca*t^ w + status + X 〜 
do^umcir^t ^ciBl cmc^*tBy Idf w sca*t w + sea*t"unJ.al 七 

T 



A leawer, cleaner Mandango with functions 

Breaking out similar, duplicate code into the setSeat () function simplifies 
the code for the f indSeats () function considerably. There are now six 
calls to the setSeat () function, which is a significant improvement in terms 
of code reuse. 


The scat humbev-, status, 
3hd description avc 
passed -to sc-tSca-tO ih 
-fuh^tioh ull. 


The sci£csi() 

-Puhdtioh is dolled 
six -times. 


function findSeats() { 

//'search through all the seats for availability 

var i = 0, finished = false; 

while (i < seats.length && !finished)( 

fnr / var -n = 0; i < seats [i] .length; D++) I 
for (var ] 」 — , 1C , 4-]o e next two seats are available 

// See if the current seat plus tne 此入匕 r . n r . , , r 

if (seats[i] [j] && seats[i] [j + H && seats[ 1 ] [d f . h sea ts 

/) Set the seat selection and update the appearance of the seats 

r ■ 1 1 _ 一 ^-4 - Vn 丄 • 


selSeat 

fsetSeat(i * 
setSeat(i ★ 
setSeat(i * 


seats[i].length + 

seats[i].length + j 
seats[i].length + j 
seats[i].length + j 


3 


-select", "Your seat ”）； 

1, "select", "Your seat"); 

2, "select", "Your seat"); 


+ (j + 3) + 


"Prompt the user toaccept^the seats + ^ 

=in^w - m + ” are available. Accept ^')； 

^^^user accepted the seats, so we're done (break out of the inner loop) 

finished = true; 
break; 

else { i 〜 selection and keep looking 

// The user rejected the seats, so clear the seat select 

selSeat - 1, ., 丄 - » ! a*f 7 Ail n "Available seat ”）； 

setSeat (i * seats [a.] . length + Jr avail \ Aval 

setSeat(i * seats[i].length + j + ^ „ aval ^ 
setSeat(i * seats[i].length + j + 2 ， avail 


’Available seat 11 ); 
’Available sest n ); 


// increment the outer loop counter 

i ++； 
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The sctScatO function makes Mandango even better 

But the setSeat () function doesn’t just benefit f indSeats () . It also 
helps make the initSeats () function more efficient because that 
function has similar seat settine code as well. 


function initSeats() { 

// initialize the appearance of all seats 

for (var i = 0; i < seats.length; i++) { 
for (var j = 0; j < seats[i].length; ]++) 

if (seats[i] [j ] ) { ■ 

II set the seat to available • 

document.getElementByld("seat" + J 1 * 

document.getElementById(" seat" + (i 

else { _ 

II set the seat to unavailable ■ 

document.getElementByld("seat" + * 

document.getElementByld("seat" + (i 


By "tV^c "task 

3 scat sctScstO 
仏於 y/oyks yca-b m art 
cr\*biv"dy di*f-fcv"CK\*b tor\*bc%*b- 






function initSeats() { 

// Initialize the appearance of all seats 
for (var i = 0; i < seats.length; i++) 
for (var j =0; j < seats[i].length; 
if (seats[i][j]) { 

// Set the seat to available 

setSeat(i * seats[i].length + j, 


else { 

// Set the seat to unavailable 

setSeat(i * seats[i].length + i, 

seat"); 



〜呷 lex |j hcs 
?to 0he mchhvcly 

^•glvt-Po^rwav-d 


So, a fairly simple function consisting of two lines of code is now used eight times 
throughout the Mandango script. Not only does this simplify the script code, but it 
makes the script more maintainable because if you ever need to change how a seat is 
set, you only have to change the one setSeat () piece of code, as opposed to eight 
separate pieces. No JavaScript coder in their right mind wants to change multiple 
pieces of code, when they don’t have to. Maintainabilty... it’s a good thing. 




BULLET POINTS 


■ Functions allow you to turn big problems into small 
problems, which become much easier to solve. 

■ Functions provide a mechanism to separate script tasks 
and then complete them with reusable chunks of code. 


■ Functions serve as a great way to eliminate duplicate 
code since the code in a function can be reused as 
many times as you want. 

■ Arguments allow you to pass data into functions as 
input for a given task. 
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ask them it’s okay 


thereicire no o 

Dumb Questions 


Is there a limit to the number of 
arguments that can be passed into a 
function? 

No and yes. No, there isn’t a real limit 
on the number of arguments that can be 
passed into a function, unless you factor 
in the limits on computer memory. If you're 
passing so many arguments that memory 
becomes an issue, you might want to take 
a break and rethink what you're doing 
because it takes an awful lot of arguments 
to cause a memory problem. The more 
practical limitation has to do with good 
design, and that means keeping the number 
of arguments to a manageable amount just 
so function calls don’t get too ridiculously 
complicated. It's generally a good idea to not 
use more than a handful of arguments. 


I’ve learned that functions turn big 
problems into small problems, divide 
scripting labor, and eliminate duplicate 
code. Which is it? 

All of the above. Functions are good at 
more than one thing, and in many cases the 
best functions accomplish several goals at 
once. It's not out of the question to create a 
function that solves a sub-problem, performs 
a division-of-labor task, and eliminates 
duplicate code, all at the same time. In fact, 
those are three pretty good goals to have 
when creating any function. But if you must 
focus on one thing, you will typically want 
to err on the side of dividing labor, which 
really means giving every function a singular 
purpose. If every function excels at one 
unique thing, your scripts will benefit greatly. 


One more time, where do functions 
go in the header or the body of a web 
page? 

Functions should appear inside the 
〈 script 〉 tag within the head of the 
page, or in an external JavaScript file that is 
imported into the head of the page. 

If I truly want a function to change 
the value of an argument, how do I do it? 

Function arguments can't be directly 
altered, or at least the changes won’t carry 
on outside of the function. So if you want to 
change a piece of data that has been passed 
as an argument, you need to return the 
changed value from the function. Read on to 
find out how return values work! 



Something isn't right 
with this thermostat- 
Tm freezing! 



Winter iw July: feedback with functions 

Although Mandango has made some big strides thanks to functions, they 
aren’t faring so well on the climate change front. It seems the JavaScript 
thermostat still isn’t quite working properly, resulting in some frigid users 
who now long for the old Heat button that never stopped heating. 
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The significance of feedback 

Our current thermostat allows you to set the temperature thanks to 
function arguments but it doesn’t report the current temperature. 

The current temperature is important because it gives you a basis for 
determining a target temperature. Besides, different thermostats often 
report different temperatures, even within the same space. What this 
boils down to is the need for feedback... you need to know the current 
temperature in order to set a meaningful target temperature. 


a»s ? lav lets 

七 ㈣ w wke adjust 
^ move adtuva^- 



The thermostat now periodically displays the current temperature as 
feedback to help assist in determining an optimal temperature. 


Request 

temperature 




yts called -to dc-tcv-mmc 
actual ■tcmfc'raWc- 



Actual 

temperature 


The actual 
temperature is 
returned 


getTempO ; 



丁 he actual is 

v-c-tuv-hcd by -the -Puh^ioh. 


So we really need a way for JavaScript functions to 
return information back to the code that called them. 





How do you think a function could be coaxed into returning data? 
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return to caller 


Returning data from fuwetiows 

Returning information from a function involves using the return 
keyword, followed by the data to be returned. This data is then returned 
to the code that called the function. 


丁 he keyword 

ihdid3*tcs "that d *fuh 匕七.|。灼 

is vctuifhihg a value. 




Ti^c \rc*bu\nr\ value be 
a” da-ba you c\\oost- 


A return statement can be placed anywhere within a function; just know 
that the function will exit immediately upon encountering a return. So 
the return statement not only returns data but also ends a function. 

As an example, the getTemp () function ends by returning the actual 
temperature, as read from a sensor. 


A return value allows 
you to return a piece o| 
data from a function. 



function getTemp() { 

// Read and convert the actual temperature 
var rawTemp = readSensor(); 
var actualTemp = convertTemp(rawTemp); 

The actual *tcm^a*turc »s 
v-c*tuv-y\cd -fv-ow» 
usm^ *tKc v-c*tuv-y\ s*ta*tew^ 七 . 

If you think back carefully, the getTemp () function has already been 
used in the thermostat code: 



yk schso\r dais is ih a 
TO\rnf»a*t 3hd heeds "to be 
^ohvcv-tcd -to dcgv-ccs. 


function heat(targetTemp) { 

while (getTemp() < targetTemp) { 

^_ 

//Do some heating somehow 


TV pv-ovidcs 

七 vdluc 七 V»a 七 is used *bcs*b 

CoY\d\hov\ (oy tile iica-to v/ilile loop. 


The return value of the getTemp () function replaces the getTemp () 
function call and becomes part of the test condition in the while loop. 


Tke return value ol a 
function replaces tke 
call to tke lunction. 
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Many happy return values 

Since the return statement immediately ends a function, you can use it 
to control the flow of a function, in addition to returning data. Not only 
that, but it’s very common for functions to indicate their success using 
return values. The heat () function presents an opportunity to do both: 


function heat (targetTemp) { Remember i\\t adtualTcmf variable? I*b 

if (getTemp() >= targe tTemp) 〆— 如如代抓 〜 0 . 

return false; 

while (getTemp() < targetTemp) { 


Wo heed -to d< 

so \rccurh -raise 
Chd the -Puh^tioh. 


► do 

V"ctu\rh -Cah 


// Do some heating somehow 


return true; <T 


T j^ s docs -the actual hcatrng, whi 乩 
3T-rcd*ts "the tcrwpcira'tuvc ； 3hd thcv-c-Povc 
the \rctu\fh value c^p gctTcr^pO. 

pmisV^cd so rth^v\ 

*tv"uc *to sufi.fi.css. 


The heat () function demonstrates how a boolean return value can 
control the flow of a function and also indicate success or failure. For pure 
flow control, you can use the return statement with no return value at 
all as a means of bailing out of a function. For example, here’s another 
version of the heat () function that doesn’t rely on the return value to 
indicate success or failure. 


function heat(targetTemp) { 
if (getTemp() >= targetTemp) 

stat ⑽ ht duts the -Puhdtioh 
sho\rt sih^c ho is \rc^uiv-cd- 

while (getTemp() < targetTemp) { 

//Do some heating somehow 





TV^c still tv\ds 4 ⑼ 

i 七 Chds, Y/rbhou 七 *bv^ 

d VC*tu\nr\ 


Tke return statement 
can te used ty itseli 
to end a function. 


you are here ► 


263 







return exposed 



Ectwift Expose Ji' 

This week’s interview: 

Secrets of a function escape artist 


Head First ： So I hear that you’re pretty slippery, able to 
get out of just about anything. 

Return ： That’s true. Put me in any function and I’ll get 
out of it in no time. I’ll even take a piece of data with me. 

Head First ： Where do you go when you leave a 
function? 

Return ： Well, don’t forget that functions are always 
called by other code, so returning from a function just 
means returning to the code that called it. And in the case, 
of returning data, it means the data is returned to the 
code that called the function. 

Head First ： How does that work? 

Return ： It helps if you think of a function call as an 
expression that has a result. If the function doesn’t return 
any data, the result of the expression is nothing. But if the 
function does return data, and many of them do, then the 
result of the expression is that piece of data. 

Head First ： So if a function is just an expression, does 
that mean you can assign the return value of a function to 
a variable? 

Return ： No and yes. No, the function itself is not 
an expression — it’s the call to the function that is the 
expression. And yes, you can and often should place a 
function call so that the result gets assigned to a variable. 
That’s where the expression comes into play~when a 
function call is evaluated, it is treated as an expression 
where the result is the return value of the function. 

Head First ： I see. But what happens to the expression 
when you don’t return anything? 

Return ： If you use me with no return data, then the 
function returns nothing and the expression is empty. 

Head First ： Isn’t that a problem? 


Return ： No, not really. You have to remember that 
people only worry about doing something with function 
return values when they know the function is capable 
of returning data. If a function isn’t intended to return 
anything, you shouldn’t worry about trying to do anything 
with a return value. 

Head First ： Gotcha. So getting back to your escape 
skills, isn’t it a bad idea to keep a function from finishing 
its natural course of execution? 

Return ： No, and here’s why. Just because a function has 
a first line and a last line does not mean it is designed to 
always run every line of code from start to finish. In fact, 
it’s dangerous to even think of a function as having a start 
and a finish. The “natural” finish of a function could very 
well be in the middle of the code thanks to some crafty 
developer putting me in the right place. 

Head First ： I don’t get it. Are you saying that it’s normal 
for some function code to never get called? 

Return ： I never say never, but I will say that there is 
usually more than one path through a function, and I 
often help establish those paths. If something takes place 
that indicates the function shouldn’t continue running, 

I’m there to give it an early exit. In other scenarios, a 
function may run all the way to its last line of code and 
exit without ever encountering me, or it may end with me 
just so I can return some data. 

Head First: Oh, I see. You provide options, both in 
terms of returning data and controlling the flow of 
execution through a function. 

Return ： Hey, you’re catching on! 

Head First ： Yeah, I’m quick like that. Thanks for your 
time. 

Return ： No worries. I gotta get out of here! 
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It seems that JavaScript has found itself caught in the middle of a climate change scandal. The 
people at We're Against Rapid Warming, or WARM, created a script to promote their message 
about local warming. But the folks at Annoyed but Responsible Citizens Tired of Increasing Cold, 
or ARCTIC, are bent on suppressing WARM’S message, and have sabotaged the script code. 
Your job is to sort out the good code from the bad, and unravel WARM’S intended message. 


function showClimateMsg() { 

return; 

alert(constructMessage ())； 


function constructClimateMsg() { 


var msg 


msg 


Global 


// "Local 


if (getTempO > 80) 
msg += "warming n 
else 

msg += "cooling 


多！ 


if (true) 
msg += 
else 

msg += 


ARCTIC ofcra-twc. 


is not 


is 






suppovtcv-. 


if (getTempO <= 70) 

return msg + "a hoax! n ; 

else 

return msg + "real!"; 
return "I don't believe it. n ; 


function getTempO { 

// Read the actual temperature 
var actualTemp = readSensor(); 
return 64; 


r 


，黪 
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exercise solution 



It seems that JavaScript has found itself caught in the middle of a climate change scandal. The 
people at We're Against Rapid Warming, or WARM, created a script to promote their message 
about local warming. But the folks at Annoyed but Responsible Citizens Tired of Increasing Cold, 
or ARCTIC, are bent on suppressing WARM’S message, and have sabotaged the script code. 
Your job is to sort out the good code from the bad, and unravel WARM’S intended message. 


This f\rcvcir\*b i\\t 

alc\rb -fv-om cvcv 


丁 his to&t is -fi hC 

-the actual 

■tcmpc\ra-tu^c is 一 

^Oh-t\rollihg -the 
message. 


TKc i-f-cUc staWcyrt 
keeps 

cvcv- ^ 

七 Wis todc, so *tV^cv-cs 
y\o veasoh bo Kavc i*t- 






r 


function showClimateMsg() 


roturn-f- 

alert(constructMessage ()); 


function constructClimateMsg() { 


var msg 


msg 


Globa^r 


'Local 


if (getTempO > 80) 
msg += "warming n 
else 

msg += "cooling 


if (truc>f 

mog + ~— 
-cla-e- 


-io nofe- 


msg 


is 


if (getTempO <= 70) 

return msg + "a hoax! n ; 

else 

return msg + "real!"; 

rcturR ： ~~ ”工 don ! t—Relieve ■— it • r 


function getTempO { 

// Read the actual temperature 
var actualTemp = readSensor(); 
return 64-r 


Local Warming is real 


丁 he ihtchdcd text 

was 乙 ommeh'ted 

out "to keep i-t out 

the 

message. 


■Kat »s fcv-w»ar\c^*tlY 

■vuc dioesh 

WAt\\ StY\St- 


Rc-tuirh the d^iual 
"tempev-a-tuve vead 
-the schsov. 


lt，S ^GttlN^ 
Hot IN tHlS 

outfit, HeLPj 
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ftettmg the status of a seat 


Back at Mandango, Seth and Jason are sick of hearing about climate 
change, and are ready to make some more improvements to their script 
code. Some users have reported difficulty in making out the different 
colors of seats, and would like to be able to click and query any seat for its 
availability. Sounds as if Mandango needs a new function. 

"The scats humbcv"cd 

Ic-ft -to might, -top -to 

bo-t-tom ; s-tav-tmg ai O. 


Seat 

Request the number 
seat status 



Seat 

status 


The seat status 
is returned 




getSeatStatus( seatNum) 

TKc scat status is a ” 

3s 3V3il3blc > 

w uy\ava'ilaklc ^ ov- w y ouv " s * 

getSeatStatusO lunction Magnets 

The getSeatStatus () function in Mandango is missing some important code that helps it figure out 
the status of a given seat. The function first checks to see if the seat is part of the series of three selected 
seats. If not, it looks up the seat in the seat array to see if it is available or unavailable. Use the magnets 
below to finish the missing pieces of code. 
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getSeatStatusQ magnets solution 



getSeatStatusO lunction Magnets Solution 

The getSeatStatus () function in Mandango is missing some important code that helps it figure out 
the status of a given seat. The function first checks to see if the seat is part of the series of three selected 
seats. If not, it looks up the seat in the seat array to see if it is available or unavailable. Use the magnets 
below to finish the missing pieces of code. 


丁 he scIScat global vaH^ble 
,s —I wliCh y\o scat is 
selected; so dhcdk -pivs't. 


1/VcVc scats *m a vow, so 

you mus*t dhcdk 七 iVis sc3*t "two. 


function getSeatStatus(seatNum) 

二 -1 && 


if 


selSeat 


reLULu pws 

else if 


selSeat 





1 

1 seatNum I 










+ 


2 ))) 


[^[ath • floor ( 
return "available 


I seatNum 


else 

return ’▼ unavails-bls 




|| seatNum | ^ 





].length]) 


'igu\rc ou-t -the a\r\ray V-OW o-p -the scat by 
dividing the scat 隊 by the humbev- 

°f ，h row ahd thch V-ouhdih^ 

Ott -fco dh ihtegev-. 


七 he scat by \rcma'mdcv- 

(Jc scat r\uw»bcv divided by 
r^umbev- Jc scats m 七 he vow. 


-oac 7 heve 
but it would bv-cak i-f you 

ew -the siic o*f 

七 he scats a\rv-ay. 


Showing the seat status 


Getting the seat status is handy but allowing the user to query any seat for its 
status requires a means of showing the seat status when the user clicks a seat. 

The showSeatStatus () function provides a simple solution to this problem, 
delegating the dirty work to the getSeatStatus () function that we just wrote. 


function showSeatStatus(seatNum) 



Pass alohg -the scat hu^bev- 
■to gctSca-tS-b-tusO -to yt 
the stai siahAS^^ 


alert("This seat is 


+ getSeatStatus(seatNum) 






CoUait^it sbr'^s 

{jo Wild a status message. 
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You can link the fuwctiow to aw image 


Wiring this function to a seat image on the Mandango page allows the user 
to query the seat for its status by clicking the image. Each image must have 
its onclick event tied to showSeatStatus (), like this: 



TV showSca-tS-tatusO (uh^tioh 

IS gIU whch -the usev- dicks 

"the 


<img id="seat23" src="" alt="" onclick="showSeatStatus(23);" /> 



r 与 

H 

钃爨酾漏圈 


89 


Tliii iy yuur^, 


IM 爨 


.Fu^l W>. I 


A click is all it takes to view the status of any seat in an alert box, 
which is useful for anyone who has trouble making out the seat 
images, and just wants to click an individual seat for its status. 


BULLET POINTS - 

■ The return statement allows functions to return data 
back to the code that called them. 

■ When a piece of data is returned from a function, it 
stands in for the code that called the function. 


■ A function can only return a single piece of data. 

■ The return statement can be used without any data 
to simply end a function early. 
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structural code enhancements 


Repetitive code is wever a good thiwg 

The Mandango script is working pretty well but the guys are 
starting to worry about maintaining the script over the long haul. 

In particular, Jason has been doing some research, and has learned 
that modern web applications often benefit from separating HTML, 
JavaScript, 


0 


0 


I see q lot of 
different code 
mixed up in there 


<html> 

<h <ti^le>Mandango - The Macho Movie Ticket Finder</title> 


〈script type=”text/javascript n > 


function initSeats() { 

... } 

function getSeatStatus(seatNum) { 


f ret°t( 4 r ： farr^ ( ： e rets ： itk^ + -•")； 


JavaS^\ript 
fiTAIL Codt ei^ 

thv-oughou-t 

web 


function setSeat(seatN 皿 , status, description) 
document.getElementByld("seat" + seatNum .src - 
document.getElementByld("seat" + seatNum).a 

} 

function findSeats() { 


"seat—" + status 
description; 


1 .png' 



src=’’" 

src _»i m a it 

src= 
src= Mn alt= 
src= 


alt 


</script> 

</head^, 

^body onload= ,f initSeats () ; ,f > . „ 

<div stvle= ,, margin-top:25px; text-align : center 

, .h- ■◦” src=" M alt= MM onclick= n showSeatStatus (0) , / 

<img id- seatO src d 亡 . 一 … 〜 . t q •” s ⑴ ； n /> 

<img id="seatl" 

<img id="seat2" 

<img id="seat3" 

<img id="seat4" 

<img id="seat5" 

<img id="seat6" src="' 

<img id="seat7" src=_’_ 

<img id="seat8" src= 

<img id="seat9" src="" 

<img id="seatl0" src=' - 
<img id="seatll" src=’ 

<img id="seatl2" src=' 

<img id="seatl3" src= 

<img id="seatl4" src= 

<img id="seatl5" src= 

<img id="seatl6" src= 

<img id="seatl7" src= 

<img id="seatl8" src= 

<img id="seatl9" src= 

<img id="seat20" src= 

<img id="seat21" src= 

<img id="seat22" src= 

<img id="seat23" src= 

<img id="seat24" src= 

<img id="seat25" src= 

<img id="seat26" src= 

<img id="seat27" src= 

<img id="seat28" src= 

<img id="seat29" src= 

<img id="seat30" src= 

<img id="seat31" src= 

<img id="seat32" src— 

<img id="seat33" src 
<img id="seat34" src 
<img id="seat35" src= 

<input type="button" id : 

</div> 

< 7^5 

</html> 


丁 he mixed JavaS^v-ip-t 

ahd ftTAIL c,odc be 

isolated -to cvcht 

_L aUHbutcs. 


alt= ”” onc ii c k= ，， showSeatStat:us (u; , // 

a]_t= nn onclick= M showSG3.tSt3.tus (1) } /〉 

ait=，* n onclick=’’showSeatStatus (2) ’• /〉 

ait=" n one ick= n showSeatStatus (3) , /> 

ait=， ,n onclick =n showSeatStatus (4) , /> 

a]_t= nn onclick =n showSeatStatus (5) , /> 

ait=，， n onclick =n showSeatStatus (6) , /> 

a]_t= nn onclick =n showSeatStatus (7) , /> 

ait= nn onclick =,f showSG3.tStatus (8) ; /><br /〉 

ait= nn onclick =M sb.owSea.tSt3.tus (9) , /> 

ait= nn onclick= n showSeatStatus(10), /> 

ait= nn onclick= n showSeatStatus(11), /> 

ait= n ” onclick=’’showSeatStatus (12) , /> 

ait= nn onclick= n showSeatStatus(13), /> 

ait= nn oncli_ck =n showSeatStatus (14) , /> 

ait= nn oncli_ck =n showSeatStatus (15) , /> 

ait= nn onclick =M sh.owSe3-tSt9.tus (16) } /〉 

ait= nn onclick =M sh.owS03.tStstus (17) } /><br /〉 

ait= nn onclick = ’’showSeatStatus (18) , /> 

a]_t= nn onclick =n showSeatStatus (19) , /> 

ait= nn onclick =n showSeatStatus( 20 ), /> 

ait= nn onclick = ’’showSeatStatus (21) , /> 

ait= nn onclick =n showSeatStatus(22) , /> 

ait= nn onclick =n showSeatStatus (23), /> 

ait= nn onclick =n showSeatStatus (24), /> 

a]_t= n n onclick =n showSeatStatus (25) ; /> 

ait = ”” Qj^QXick =,f sh.owS09-tSta.tus (26) r />〈br /〉 

ait= nn onclick =, ’ showSeatStatus (27) , /> 

ait= nn onclick =n showSeatStatus(28), /> 

a]_t= n n onclick =n showSeatStatus (29) , /> 

I alt=” n onclick= ,f showS03.tSt3.tus (30) , /〉 

• alt =nn onclick=’’showSeatStatus (31) , /> 

I alt =nn onclick =n showSeatStatus(32), /> 

I alt =nn onclick= n showS6a.tSt3.tus (33) , /〉 

ait= nn onclick =n showSeatStatus(34), /> 

^-j+-_!in onclick =n showSeatStatus (35) ， /><br /〉 
findseats” value="Find Seats” onclick=»findSeat 


s(); n /> 
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Separate your fuwctiowality from your cowtcwt 

So what’s the big deal with mixing code? It obviously works, right? The problem 
has a lot to do with viewing your JavaScript-powered web pages not as pages, but as 
applications. And like any good application, JavaScript applications require careful 
planning and design for long-term success. More to the point, good applications are less 
buggy and easier to maintain when there is a separation of content, presentation, and 
functionality. As it stands, Mandango very much represents a murky merger of all three. 


av\d 

-Puhd-tiohality iuv-hs a big 
Problem ih-to small pv-oblcms. 

ms is uic i 丄丄 - -丄 T u ， J 

hich provides the structure for how 
the page physically goes together, as 
well as housing the data m the page. 


Content 

This is the 







Presentation 

This is the CSS pai 
dresses up the content and determines 
its appearance，such as fonts, colors, 
and even layout. 


Functionality 

This is the JavaScrJ 
the page and makes it interactive. You 
can think of this part of the page as the 
part that does things. 


Think about the code separation issue this way. Let’s say Seth and Jason 
find a really slick movie seat management script that they’d like to use 
instead of their own code. They would need to overhaul Mandango so 
that it uses the new script code, but they would have to risk screwing up 
the structure of the page because the JavaScript code is intimately tied to 
the HTML code. It would be much better if the HTML code was isolated, 
and the JavaScript-to-HTML connection occurred purely in JavaScript. 


Separating 

functionality from 
content makes 
wet applications 
easier to l>uilct 
anct maintain. 





How would you go about using functions to separate 
functionality from content in Mandango? 
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data = functions 


Fuwctiows are just data 

In order to effectively separate code you’ll need to understand how 
functions are wired to events; so far, we’ve done this using HTML 
attributes. There’s another way, which a lot of people consider to be 
superior to mixing JavaScript and HTML code. This other way of wiring 
event handlers requires a different view of functions. 

Surprisingly enough，functions are really just variables. It’s true. 
The twist is that the function body is the value, while the function name is 
the variable name. Here’s the way you’re accustomed to viewing functions: 



function showSeatStatus(seatNum) { 


TKc WW seated jus 七 

like alv/ay s * 


alert ("This seat is ’▼ + getSeatStatus (seatNum) 


)； 


That code works fine, but here’s the same function 
created in a different way. 



The hame is 

the vav-iablc hame. 


var showSeatStatus = function(seatNum) { 

alert("This seat is " + getSeatStatus(seatNum) + 




TKc WW body »s v/alu〆 
variable, also k^oy/^ as a 
1,-tcral c 乎 essed l»kc *tWis. 


This code shows how a function can be created using the same syntax 
as a variable, and even consists of the same pieces and parts: a unique 
identifier (function name) plus a value (function body). When a function 
body appears by itself without a name, it is known as a function literal. 

What makes this revelation about functions so interesting is that it shows 
that functions can be manipulated like variables. For example, what do 
you think the following code does? 

var myShowSeatStatus = showSeatStatus; 


•^yShowSca-tS-b-tus viable. 


Assigh the shoy/Sca-tStatusO 

TUhdtioh ijo *thc 
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Calling or refcrcwcmg your fuwctiows 

When you assign the name of a function to another variable, you’re giving that 
variable access to the body of the function. In other words, you can write code 
like this to call the same function: 


alert(myShowSeatStatus(23)); 



Call same *tWou^ 

七 ^ mYSKoy/Sca*tS*ta*tus variable. 


The end result of calling myShowSeatStatus () is the same as calling 
showSeatStatus () because both functions ultimately reference the 
same code. For this reason, a function name is also known as a function 
reference. 


showSeatStatus 



myShowSeatStatus 


function() 



{ 


The distinction between referencing a function and calling a function 
has to do with whether you follow the function name with parentheses (). 
Function references appear by themselves, while function calls are always 
followed by parentheses, and in many cases function arguments. 


A iunction is really 
just a variable 
wkose value is a 
reference to tke 
Iunction tody* 


is same 
ds slioy/ScdtS'tS'tusf) • 


var myShowSeatS tatus = 
myShowSeatStatus(23); 



\TC-Pc\rChdC -fco 

rwyShoy/Sca-tS-tatus. 





Analyze the following code, and write down what number appears in the alert box. 

function doThis(num) { 
num++; 
return num; 

} 


function doThat(num) 
num--; 
return num; 


var 

X = 

doThis (11); 

var 

y = 

doThat; 

var 

z = 

doThat (x); 

x = 

y (z) 

• 

F 

y = x; 

alert(doThat( z - y)) 
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exercise solution 



Analyze the following code, and write down what number appears in the alert box. 



Q ； i s 


separating content really that big 


of a deal? 


Yes and no. For simple applications, 
it’s not necessarily wrong to blend HTML, 
CSS, and JavaScript code. The benefits of 
code separation become significant in more 
complex applications that involve lots of 
code. It's much harder to get a handle on 
the big picture in larger applications, which 
means it's easy to get in trouble when 
making changes, especially when different 
kinds of code are all mixed together. By 
cleanly separating the code, you can feel 
safer making functional changes without 
breaking something in the structure or 
appearance of the page. This also allows 
people with different areas of expertise to 
work on the same project. 


tJiereiare no ^ 

Dumb Questi9ns 


For example, web designers can work 
on the structure and presentation of an 
application without fear of creating errors in 
functional JavaScript code that they may not 
understand. 

If a function is just data, how can 
I distinguish a function from a normal 
variable? 

The difference between a function 
and a “normal” variable comes down to 
what you do with the data. The data (code) 
associated with functions is capable of being 
executed. You indicate that you want to run 
a function by following the function name 
with parentheses, including arguments if the 
function requires them. 


What’s the point of function 
references? 

Unlike a normal variable, which stores 
its data as a value in an area of memory, 
functions store a reference to their code. 

So the value of a function variable isn’t the 
code itself but a reference to the location in 
memory where the code is stored. It's kind of 
like how your mailing address is a reference 
to your house, not the house itself. 

Functions use references instead of actual 
values because it is more efficient than 
storing multiple copies of function code. So 
when you assign a function to an event 
handler, as you do in a moment, you're really 
just assigning a reference to the function 
code, not the code itself. 
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OK, so function references sound pretty 
neat, but what do they have to do with 
separating content from functionality? 


o 



* 


69 (callback features) for functions 


Function references are closely linked to a special way of calling functions 
that has a lot to do with separating content from functionality. You’re 
familiar with calling a function from your own Mandango code. 


setSeat(i * seats[i].length + j, "select", "Your seat"); 



But this isn’t the only way functions can get called in scripts. Another kind 
of function known as a callback function can get called without you 
having anything directly to do with it. 





How do you think Mandango could take advantage of 
callback functions? 
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normal function v. callback function 


Fireside Chats 



Tonight’s talk ： Normal function and Callback function 
confront each other 


Normal function: Callback function: 

So you’re the guy I keep hearing about, who won’t 
accept local calls. What’s with the attitude? 

No attitude, I just serve a different purpose. I prefer 
to only be called from exotic, faraway places. 

You mean like the browser? Real exotic. I think 
you’re just a little stuck up about those of us who 
talk with script code on a regular basis. 

Look, it’s not about who is better or worse. We’re 
all script code, it’s just that I give outsiders a means 
of accessing script code. Without me, you would 
never know when anything takes place outside of 
the script. 

Boy, that sure would be a loss. Not! Who cares what 
goes on outside of the script? 

Actually, everyone. Don’t forget that the whole point 
of scripting is to provide web users with a better 
experience. If a script had no means of detecting 
events outside of itself, the user experience would 
be awful tough to improve. 

You may have a point there. I do like knowing when 
the page loads or when the user clicks or types 
something. So you’re saying I wouldn’t know about 
those things without you? 

That’s right. The browser calls me, and in many 
cases I call you since responding to outside 
happenings often requires several functions. 

Well, I’m glad to hear that we really aren’t so 
different after all. 

Yep. So I guess I’ll see you around. 

Don’t call me, I’ll call you. 


Good luck with that. 
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Evcwts, callbacks, awd HTML attributes 


We’ve been using callback functions all along, which are called by the 
browser, instead of your own code. The most common use of callback 
functions is in handling events. Mandango already heavily relies upon 
callback functions. In fact, event handling functions are the basis of 
the problem involving the mixing of HTML and JavaScript code. 


丁 Wowsev - (alU 



i\\t pay loaded 



initSeats() 


showSeatStatus(26) 


These callback functions are wired to events in the HTML code 
for the Mandango page. 



The ortlodd HTAIL ^tbribute 
is used to wiv-c the ihitScatsO 
-Puhdiio^ -to -the onload 


<img id="seat26" sre: 


alt: 


onclick="showSeatStatus(26) 


/> 


TV^ O^li^k HTML atbribu 七 e is 

used *to v/ivc 七认 sO 

-(*uy\£>*bioy\ "to oir\£-li£-k cvc^*t* 



This technique of tying event handling functions to events via HTML 
attributes works just fine, but it has the downside of requiring JavaScript 
code to be mixed with HTML code. Function references make it possible 
to separate this mixture and break apart HTML and JavaScript... 
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avoiding HTML with function references 


Wiring evewts using function references 


Instead of using an HTML attribute to wire a callback function to an 
event as an event handler, you can assign a function reference directly in 
JavaScript code. In other words, you don’t have to venture into HTML 
code at all — just set the callback function using a function reference, all 
from within JavaScript code. 

window.onload = initSeats; 



-ruh^tioh you 

doh t waht -to \TUh -the -Puhdtioh, 
y° u j us t "to it 



丁 he onload cvch-fc is a pv-opev-ty 

the window object. 



f\ *to m'itSca*bO 

•^iA\r\d*bioy\ is 3 ssi^y\cd *to 
onload f\rofc\rty. 


So setting an event handler purely in JavaScript code involves assigning a 
function reference to an event property of an object. In the case of this 
onload event handling code, the assignment of the function reference 
causes the initSeats () function to get called when the event is 
triggered. Even though this call happens automatically when the event is 
fired, the effect is this: 


onloaci! 


如 window.onload() 




initSeats ()} 


The onload a 灼 

everrt hd^dlcv* *thv*ou^h 
wmdow o^lodd fv*ofcv**ty … 


...and s\v\U the pvopcirty is sci bo a 
•fuhdticm the mitScatsO 

yb called {o handle the c 心七 . 


The upside to using a function reference to assign an event handler 
function to an event is that it allows us to cleanly separate JavaScript code 
from HTML code — there’s no need to assign JavaScript code to HTML 
event attributes. 


<body onload^^i-rri: 



<body> 


Now the <body> tag can just be the <body> tag since the function 
handler is wired purely in JavaScript code. We just have to make sure that 
the event assignment code gets run as early as possible, so usually it takes 
place in the head of the page. 

But there’s a problem. What happens if we need to pass an argument into 
an event handler to help it do its job? This isn’t a problem with onload 
in Mandango, but the one lick event needs to pass along the number of 
the seat that was clicked. Function references offer no means of passing 
through arguments, so we need another option... 


Function references 
provide a 
convenient way to 
wire event kanctler 
functions to events. 
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Fuwctiow literals to the rescue 



The onlick event for seat images in Mandango must call the 
showSeatStatus () function with an argument (the seat number) 
indicating the seat that was clicked. Simply assigning a reference to the 
function won’t pass along the argument, which presents a big problem, 
but there is another way. The solution is to use a function literal as the 
function reference, and then call the showSeatStatus () function 
from inside the function literal. 


scat is retrieved so i\\ai 

•rts omU pv-ofev-ty addessed- 


R-ffi 

i»Mua 胃 


document. getElementById (''seat2 6) . onclick = function (evt) { 
showSeatStatus(26); 


li*tcval 'Wap, 七 he 
dall io shoy/Sea*t£*taW), alio— 

a 竹 *to be passed ir\*to »*t- 


The -Puhdtioh litcv-al is assi^ed 
七 he ohdli^k p\ropcV"*ty 
3s a -Puh^tioh \rc-fcv-chdc. 


fir\ ever\i objedt is auWatidally 

passed "to a 於 cvcr>*t Ka 於 diet as 

its -f i\rs*t av-^ur«cr\*t- 


The function literal is used purely as a wrapper around the call to the 
showSeatStatus () function, but it plays a critical role in allowing us 
to pass along the appropriate seat number to the function. You can think of 
the function literal as a nameless function that handles the event. For this 
reason, function literals are sometimes called anonymous functions. 

This code reveals how JavaScript offers an event object that is passed into 
event handlers, in this case through the evt argument. The event object 
contains information specific to each different event. In this case we don’t 
need to know any detailed information about the event, so it’s OK to just 
not use the evt argument. 


Function literals 
let you create 
anonymous event 
kandler functions. 





Wire the initSeats () function to the onload event handler, but this time use a function 
literal instead of a function reference. 


you are here ► 
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exercise solution 



Wire the initSeats () function to the onload event handler, but this time use a function 
literal instead of a function reference. 

RctS€ 

LuiiOH v/indov/.onloddl — •fwnfrtionfe'/'t) 1 

mi'tSea'tsO ； 

"The ihi-tSca-tsO -fuh^tioh is TKc cv*t av-^umci^t is *i^ov-cd s\Y\U 

Glled ihsidc o-f -the ohload onload cvcv>*t has ⑽ 

CVCh "t hahdlcv- -fuh^-tioh Irtcval. Y\Ctd (or cvcr\*t objedt 



Where's the wiring? 


There’s still an unresolved issue related to event wiring through function 
literals. We know that the onload event handler can just be assigned in 
the head of the page inside the <script> tag, just like normal script 
code. And that works great because the code tied to onload doesn’t run 
until after the page is loaded (when the onload event fires), just as if we 
had used the old approach of assigning initSeats () to the HTML 
onload attribute of the <body> tag. But where do other function literal 
event handlers get wired? 

The answer goes back to the onload event handler callback function, 
which serves as a great place to wire all events for a page. 


Tke onload event 
kanctler is an 
excellent place to 
initialize all events. 


window.onload = function () 



AH othc\r events oh the 
P a 9 c ^ be Wi\rcd ihside of 
the ohload cvcht hhdld 


initSeats(); 


Tiic CoAt spct'i-f'id *to 
o^lodd is still v-uv\ 

mside *tKc ewt Kar^dlcv-. 


What this code boils down to is that the onload event handler becomes 
an event initialization function where all other events in a page are set. 
So the onload event handler not only performs normal start-up duties 
for the page, such as initializing the seats, but also wires all other event 
handler callback functions for the application. 
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functions 



Why do callback functions matter? 

Callback functions are significant 
because they allow you to react to things 
that take place outside of your code. Instead 
of you calling a function from your own 
code, you create a callback function that is 
essentially on standby waiting for something 
to take place so that it can leap into action. 
When that something takes place, it is the 
browser’s responsibility to let the callback 
function know it can run. All you do is set 
the stage by wiring the callback function to a 
trigger, usually an event. 



Are there callback functions other 
than event handlers? 

Yes. We explore another common 
usage of callback functions in Chapter 12 
when they are called to process data sent by 
the server in a request for data using Ajax. 

I’m still confused about function 
literals. What are they, and why are they 
such a big deal? 

A function literal is just a function body 
without a name, kind of like a literal piece of 


data such as a number or string. Function 
literals are important because they are 
ideal in situations where you need a quick 
one-off callback function. In other words, the 
function is only called once, and not by your 
code. So you create a function literal and 
assign it directly to an event property, as 
opposed to creating a named function and 
assigning its reference. It's really more of 
a coding efficiency issue, taking advantage 
of the fact that you don’t need a formally 
named function in some situations. And don’t 
forget that function literals are really only 
necessary when you need to do more than 
simply reference a function, such as pass an 
argument to a function. 


Finish the missing code in Mandango’s new onload event 
handler function. 



you are here ► 
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sharpen solution 


(^Jterpen your pencil 

Solution 


The cy>*tiv-c onload 

cvcr>*t ha 灼 dl^r is a 

-fur>t*tiov\ li*tcval- 


window.onload = function () 


Finish the missing code in Mandango’s new onload event 
handler function. 

The •fihdSc^'tsO -fub^tioh is 
tied io ihc ohdi 乙 k cvchi 
usi% a -Puhdtioh Yt^tYtY\Ct- 


// wire the Find Seat button event ^ 

document. getElementByldrfindseats-) . 


// wire the seat image events 
document.getElementByld("seatO ) 
document.getElementByld( n seatl n ) 
document.getElementByld("seat2 ) 


= function (evt) { siio^Sca^td'tusfO )； 

= function (evt) { sliowSca^^'tusO )； ^ 
=function (evt) { slioy/Sc3 , tSt3tus(2 -)； ^ 


// initialize the seat appearances 


The ihi-tScatsO -fuhd-tioh 
is called "to -finish up 
ohload tasks. 


T\\t or^lidk pvofcvty -fov eaA 
scat imd^e is attessed *to sc*t 
o^li^k cvcr\*t iiar\cllcv-s. 


showScatStatusO is called 
*(Vom withih a -Puh^tioh 
li 七 Clral so 七七 

匕 be passed ih*fco it 


BULLET POINTS - 

■ Callback functions are called by the browser in response 
to things that take place outside of the script. 

■ Function references can be used to assign functions 
as if they were variables. 


Function references let you wire event handler functions 
in JavaScript code without altering HTML code. 

Function literals are nameless functions that are handy 
in situations when a named function isn’t necessary. 
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functions 
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Why is the onload event handler in Mandango 
created as a function literal? 

Because there isn’t really any reason to create a named 
function for it. The function only gets called once, and that’s 
in response to the onload event. We could've just as 
easily created a named function and assigned its reference to 
window. onload, but the connection between callback 
function and event is clearer when the function is directly tied to 
the event using a function literal. 



esti9ns 


Do the other callback functions have to be wired in 
the onload event handler? 

Yes. You might think you could wire them directly within 
the 〈 script 〉 tag in the head of the page. But remember 
that the content for the page hasn’t finished loading at that point. 
So, all of the getElementByld () calls would fall flat 
on their faces and the event handlers wouldn't get wired. The 
onload handler guarantees you that the page has loaded. 


A shell of an HTML page 

Separating the JavaScript code from the HTML code il 
Mandango reveals how truly minimal the structural paB 
of the page becomes. This makes the HTML code muH 


easier to maintain without fear of trampling 
code that might break the application. 


ava 




Dude, I need a 
picture of that! 


Look at that 
code! It’s so 
maintainable. 



id 

id: 

id: 

id= 


id 

id: 

id: 

id: 




r seat0'' src=， M 
f seatl’’ src= n, 


id: 

id: 

id: 

id= 


</div> 

</body> 


<body> 

<div style 
<img id= 

<img 
<img 
<img 
<img 
<img id 
<img 
<img 
<img 
<img 
<img 
<img 
<img 
<img 
<img id 
<img id: 

<img id= 

<img id= 

<img id= 

<img id= 

<img id= 

<img id= 

<img id= 

<img id= 

<img id=' 

<img id=' 

<img id= ? 

<img id=, 

<img id= n 
<img id= n 
<img id= n 
<img id= ff 
<img id= n , 

■ ■ I — ― u j _ 。一 

<img id="seat33" S rc="" 
<img id="seat34" src= n ” 
<img id="seat35" src= ”” 
<img id="seat36" src= ”” 
<img id="seat37" src= ”” 
<img id="seat38" src= ”” 
<img id="seat39" S rc="" 
〈input typ e ="button" id= 


alt= ，，” /> 
alt=，，，，/> 

: "seat2 Tr src= n ” alt= 
:”seat3’’ src= nn alt= 

” seat4’’ src= ，，” alt= 
’’seat5 n src= nn alt= 
rf seat6 Tf src= nn alt= 
〖 ’seat7’’ src= n ” alt= 
’seat8” src= ， " ， alt= 
r seat9 Tf src= ffTf alt= 
’seatlO’’ src=” ，， alt= 
seatll’’ src= ，，” alt= 
seatl2’’ src= ，，，， alt= 
seatl3 lf src=” n alt= 

= ’’seatl4” src= ，，” alt= 

= ”seatl5’’ src= ，，，， alt= 

= n seatl6 T, src= nn alt= 

= ”seatl7” src= ，，” alt= 

= ”seatl8” src= ， " ， alt= 
seatl9’’ src= ， " ， alt= 

:” seat20” src= ，，” alt =， 

” seat21，， src =，，” alt=f 
” seat22’’ src= ，，，， alt =， 
n seat23 ff src= ”” alt= n 
,f seat24 Tf src= nf, alt= n 
,f seat25 n src= n ” alt=” 
’seat26” src= n ” a lt= ff 
r seat27 n src= ffff alt=” 
, seat28 T, src= nn alt= n 
seat29 f, src= n ” alt= n, 
seat30" src="" 
seat3l" sr c ="" 


: center〃> 


alt=，" 

/> 

alt=，" 

/> 

alt =，"， 

/> 

alt =，"， 

/> 

alt = ”，， 

/> 

alt =，"， 

/> 

alt =，"， 

/> 

alt =，，，， 

/> 

alt =，，，， 

/> 

alt =，，，， 

/ ><br /> 

"findseats" value 


:” Find Seats" /> 
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functional JavaScript 


Owe small step for JavaScript... 

Although we didn’t manage to solve world peace, we did take a step in 
the right direction by using JavaScript to get a handle on climate control. 
Turning big problems into small problems, focusing on a singularity 
of purpose, and striving for code reuse are all ways that functions can 
improve scripts. 




And of course, Seth and Jason put the same problem-solving techniques 
to work by creating a better organized and more maintainable version of 
Mandango. If nothing else, the world of macho movie-going is at peace.. 



i -mi 






nti 


r ir ir i 




I through 3 in 






Accept? 




f If 


Gi^cel 


rlBt 


F\roh"t \rov// 
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functions 



JavaScriptcross 

Well, it’s that time again. Take a load off and twist 
your cerebellum around this crossword puzzle. 



Across 

3. When you assign a function to a variable, you use a 
function. 

5. Functions help eliminate this kind of code. 

6. You never call this kind of function yourself. 

10. A nameless function body. 

12. When code is relatively easy to modify, it is considered to 

have good. 

13. HTML code represents this part of a Web page. 


Down 

I . .… is at peace with Mandango now. 

2_ Functions improve the.of code so that you don't 

unnecessarily duplicate it. 

4. JavaScript represents this part a Web page. 

7. To pass data back from a function, just …… it. 

8. A piece of reusable JavaScript code. 

9. Functions are good at breaking these down. 

II. This is how you pass data into a function. 


you are here ► 
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JavaScriptcross solution 




JavaScPiptcross Solution 
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functions 



V 嫩 


Fold the page vertically 抓沿 Actions M to your JavaScript We? 

to line up the two brains J J 

and solve the riddle. 

:- Its d mcctmg o( w\*mds| - 





Peace is always a tricky proposition. Even 
witk JavaScript cocte，only tke most 
organized code leacts to trarupility and 
calm. It’s not easy to lead a life oi 
comfort, at least in terms oi JavaScript. 
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7 forms and Valid^ition 





I wonder if my suave, ] 

debonair personality will be 
enough to get this Betty's phone 
number...looking for some 
validation here, you know? 




You don’t have to be suave or sneaky to successfully get 
information from users with JavaScript. But you do have to be 

careful. Humans have this strange tendency to make mistakes, which means you 
can't always count on the data provided in online forms being accurate or valid. Enter 
JavaScript. By passing form data through the right JavaScript code as it is being 
entered, you can make web applications much more reliable, and also take some 
load off of the server. We need to save that precious bandwidth for important 
things like stunt videos and cute pet pictures. 


this is a new chapter 
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banner data fields 


Pawwerocity: messaging the friendly skies 

Stunt-loving aviator Howard has turned his love of flying into an aerial banner 
business, Bannerocity. Howard wants to put a whole new meaning to the term 
'banner ad’’ by taking online orders for aerial banners. In addition to kick starting 
his new business, Howard hopes the online order system will free up his time so 
he can spend more of it enjoying the friendly skies. 



awesorhe deal 
Oh this vihtage 
c\ra fbhe 


o ⑽七 ttoY/avd's ?apcv- 
ovdev- -fovm all o\ 

七 he 

lor ac^al ka^cv- ordtr. 





It’s very important for the Bannerocity online order form to 
capture all of the order information that is associated with an 
aerial banner order. Howard figures the online order form should 
include all of the fields on the paper form, plus an email field 
since customers will be filling out the form online. 


Message 


The message to be displayed 
in the aerial banner ad. 


Fly date 


Z\? code 

The geographical area where 
the message is to be displayed. 
Howard flies over a specified ZIP 
code when showing an ad. 


The date on which the 
banner ad is flown. 

Name 

The customer’s name. 


Phone number 

The customer’s 
phone number. 


Smil 

The customers 
email address. 
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forms and validation 


The Pawwerocity HTML form 


With a little help from HTML, Howard’s first stab at an 
online order form for Bannerocity looks great. 




EanntfMitv > Personalized Online Sfey ftanneri- 


C~i 


BANNEROCITY 


inter Tfta banner mfis&age ： | 

EntRr ZIP mrlH fff thH loreitkin: | 

Ent 日 r 伽日 fer She message to be shown: 

Ditar youf nams:: |_ 

tfitiF your pricrfie number: 

Enter ynur amnil addnftRii'. 

Dune 


Ordf r fSflnnfr | 


Wow, the online order 
form looks really good. 


O 


The shiny new Bannerocity order form has all of the 
necessary form fields, and is ready io^ taking orders 
without using any JavaScript code. 



at’s the catch? 


rto>/avd V^as \>ctYs *m 七 
pv\va*tc ^ a v/Wilc 
W 七 k seem {p \ti 

V^a^dsomc 



rpen your pencil 




Try your hand at writing an order using Howard’s HTML order 
form. Don’t worry, you won’t be charged for the banner ad! 


Enter the banner message: I 
Enter ZIP code of the I□ cation: 

Enter the date for the message !o be shown: 


Enter your name: 


Enter your phone number: 
Enter your email address: 


you are here ► 
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sharpen solution 


(^Jharpen your pencil 

Solution 


You didn't ky>oy/ bu 七 ttov/av-d £.av> 
or>ly display VI diiavad*tc\rs or\ \\\s ■ 
aev-'idl barney, so *tKis oy\C IS *too lov>^ 


Try your hand at writing an order using Howard’s HTML order 
form. Don’t worry, you won’t be charged for the banner ad! 


Tio r^hy hurwbc\rs m the ZIP 
^odc — should jus-t be -five. 


Enter the banner message: Mandango... the movie seat picker for tough guys! 
Enter ZIP code of the location: [100012 


Enter the date for the message lo be shown: March 11,2009 


Enter your name: Seth Tinseiman 


Enter your phone number: ( 212 ) 555-5339 
Enter your email address: | setht@mandango 


OK the 

朽 is -fihe. 


Tiiis is Sy\ mvalid email 
addvess — iVs 
domdm c%*bdr\sior\, s\aCM as biz. 


pho^c i^urwbcv* is 
»cd "to be \v\ the -fov-» 

wiih v\o pav-c^ihcscs. 



J\\t date is v\oi m i\\t 

MM/PP/WW 

*b^a*b tiic -fo\rm 


Whew HTML is wot enough 


Online forms are only as good as the data entered into them, Howard realizes 
he’s going to need the help of JavaScript to make sure his form data is reliable. 
And he needs to help clarify to the user what exactly constitutes “good data.” 
For example, without some kind of cue from the Bannerocity page, the user 
has no clue that there is a 32-character limit on the banner ad message, or 
that the date must be entered as MM/DD/YYYY. 


Tm sorry, theres a 
32-character limit 
on banner ad text. 


O 

0 



l/Vith some help -fv-om / 
JavaS^vip^ this ihvdlid 
td^Y\ be pv-cvchtcd 


doy\ l i homnr^lly -talk/ 
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There’s a small problem. All the clever data manipulating 
JavaScript code in the world won’t help Howard until he 
figures out how to gain access to form data from JavaScript... 




















forms and validation 


Accessing form data 


In order to access the data that has been entered into a form, it’s first 
necessary to uniquely identify each field in a form. This is handled in 
HTML code, using one of two (or both!) attributes. 


T\\t id atbribu 七 e 
ur\i<\ucly 

element m a fay 


丁 he at-tv-ibu-tc 



<input id=" zipcode 



/> 



BotV) atbriW 七 es scv-vc 
as idcir\t>-ficv-s -fo\r {\\t 

•mfu 七 -field. 

The reason for two different identification approaches for form fields 
has to do with how fields are accessed. The first approach uses the 
getElementByld () function that is used to access any element on a 
page. This approach works fine but there is a simpler approach that is 
specific to form fields. 

Every form field has a form object that can be passed along to any 
function that is called to validate form data. 

<input id= M zipcode" name= M zipcode" type= n text" size= M 5" onclick= n showIt(this•form)，'/> 


The neat thing about the form object is that it is also an array that holds 
all of the fields in the form. But the items in the array aren’t stored using 
numeric indexes; instead they are stored using their unique identifier as 
set in the name attribute! So if the form object is passed into a function 
as an argument named the Form, the value entered in the ZIP code field 
can be accessed like this: 

咖 c d 

function showlt(theForm) { 

alert (theForm["zipcode"] .value); 


The ur^i^uC o( -fovm 
-f ield, as sc*t m 七 he 
a*t*tvibu*tc o( 


^ Y/Sr\i ihc value sieved ih 
"the -field ； hot "tlic -field itscl-f. 


丁 he value c4 - -the ZJP 
^ode -field is displayed- 


r 



_ 



This approach to accessing form data is no better or worse than using 
getElementByld (), other than making code easier to read since it involves 
less of it. The form object provides a shortcut, so you might as well use it. 
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when to validate 
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Why does an individual form field even have access to 
the form object? 

Sometimes it doesn't, but keep in mind that a form field is 
capable of calling a validation function that needs access to the 
data in other form fields. In this case, the form object made 
available within each field becomes the key to conveniently 
accessing other form fields. This object is typically passed into 
the validation function so that the function can quickly grab any 
field it needs. The Bannerocity example continues to lean heavily 
on the form object to access fields in its order form. 



esti9ns 


So is value a property of a form field? Does that mean 
each form field is really an object? 

Yes and yes. Each form field is represented by an 
object to JavaScript code, and the form object provides a 
quick and easy way to access such an object for any field in 
a form. Once you have a form field object in hand by way of 
form [ "objectname" ], you can then access its value by 
tacking on the value property. You'll learn all about objects in 
Chapters 9 and 10. 


I get that knowing how to access form data in 
JavaScript is important for making sure data is 
OK. But how do you know when to check it? 


Knowing when to check form data is 
dependent upon choosing the correct 
user input event to handle. 

The answer to the “when” of data validation involves 
events, and understanding which event lets you know 
when the user has entered data into a particular 
field. In other words, the challenge is to respond to 
the event that is triggered immediately after data has 
been entered. But the question still remains... which 
event is it? 
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forms and validation 


Form field follow a chain of evcwts 


When data is entered into a form, a flurry of events are generated. You 
can use these events as an entry point for validating data on a field by field 
basis. But doing so involves taking a look at a typical input sequence and 
understanding exactly which events are fired... and when. 


O 

o 

❺ 

❹ 

❺ 


Select the input field (onf ocus). 

Enter data into the field. 

Leave the input field to move to the next 
one (onblur/onchange). 

Select the next input field (onf ocus). 
Enter data into the field... 


Entering ctata into 
a form sets oil a 
ckain ol interesting 
JavaScript events. 


O onfocus! 


Enter the banner message: Mandango... the movie seat picker for tough guys! 

o onf ocus! ontiur! 一 

wonckangfe! 


Enter ZIP code of the location: |ioooi2 
Enter the date for the message to be shown: 



Enter your name: 

Enter your phone number: 
Enter your email address: 


The onf ocus event is fired when a field first gets 
selected for input, while onblur is fired when a field 
loses input selection. The onchange event is similar 
to onblur except that it only gets triggered if the field 
loses input selection and its contents have been changed. 





Which event makes the most sense 
for validating a field of form data? 


you are here ► 
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am I seeing things? 


Losing focus with onblur 


While there is an argument to be made for using the onchange event 
for data validation, there is a particular problem in that you can’t use it to 
validate an empty field. The reason is that nothing is present when a form 
is first loaded, but since the form data hasn’t changed either, onchange 
won’t trigger even if a user navigates through empty form fields. The 
onblur event solves this problem by always being triggered any time the 
input selection, or focus, leaves a field. 


Tke ontlur event 
is a perfect trigger 


onfocus! 


The rwcssajc -field 今 ams 
the mput -Podus. 


lor data valictation. 

Wothihg is Chtcv-cd 
，h 七 he -field. 



The text -field gaihs ihput whch 
the useir di^ks it with the r^ousc 

tabs -to it usihj -the keyboard. 


Unlike onchange, onblur gets fired every time a field loses focus, even 
if the data hasn’t been touched. This means onblur is very powerful, 
but also means you have to be careful about how and when you go about 
notifying the user of data validation issues. Case in point... the alert box, 
which can be an easy but risky proposition for validation notification. 


tKereicire no ^ 

Dumb Questions 


Aren’t some events generated when the user actually 
enters form data? 

Yes. Several events are generated in response to keypresses, 
such as onkeypress, onkeyup, onkeydown, etc. While 
there are certainly situations where it makes sense to respond to these 
events, they aren’t usually a good idea for validating data because the 
user is typically still in the midst of entering information when these 
events get triggered. Validating data using these events would be 
somewhat overbearing, notifying the user of every typo and unfinished 
piece of data as it is being entered. It's probably better to wait until users 
leave a field, which is an indication that they are finished entering data 
into it. And this is done by responding to the onblur event. 


onblur seems like a weird name for an event. What 
does it mean? 

The idea is that onblur is supposed to be the counterpart to 
onfocus. So if onfocus is fired when an element or form field 
gains input focus, then onblur is fired when a field loses focus. 
Even though the word “focus” in this context isn’t exactly referring 
to vision, the word “blur” is used to indicate a lack of focus. It's a 
JavaScript play on words that ends up being a little confusing. Just 
remember that onblur is fired when a field loses focus. 
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forms and validation 


You can use m alert box for validation messages 


Alert boxes are certainly handy for quickly displaying information to the user, and they 
happen to represent the most simple form of notification for letting the user know 
something is wrong with form data. Just call the alert () function while handling the 
onblur event if a problem is detected with the form data. 


Chcdk -to see i-P -the 
-field is empty. 


A validation -Puhdtio^ is ddlled 

"to validate the name daia 




rpen your pencil 


How many onblur events are generated by the following input sequence? 
How many onchange events? Don’t worry about onf ocus. 



Number of onblur events: 
Number of onchange events: 
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297 


















onblur and onchange face off 

- your pendl 

Solution 


How many onblur events are generated by the following input sequence? 
How many onchange events? Don’t worry about onf ocus. 


tililttrV 


Enter your name: [ Seth Tinselman^ 
Enter your phone numb^; — 


Enter your email address: f setht@mandango 、 onckan e! 


Number of onblur events: 


Number of onchange events: 


z 


Fireside Chats 



Tonight’s talk： onblur and onchange discuss when to react to 
bad form data 


onblur: onchange: 

These days it seems as if scripts are always worried 
about what the user is up to. I guess that’s where 
you and I come in. 

That’s right. We’re quite a pair, always there to let 
somebody know when an element or form field 
loses focus or some data has changed... or both! 

That’s something I’ve been meaning to talk to you 
about. Rumor is there has been some empty data 
floating around and a lot of fingers have been 
pointing your way. 

I’m frankly a little shocked by the accusation. You 
know I never miss a beat when it comes to notifying 
a script of data that has changed. 

That’s true. Nobody is questioning your reliability 
when data has changed. Problem is, what happens 
if a form starts off with empty data that never 
changes? 


298 Chapter 7 














forms and validation 


onblur: 


onchange: 

Are you saying a user is capable of trying to submit 
a form with blank fields? That doesn’t make any 
sense. 


That’s true, it doesn’t make any sense, and neither 
do some users, but they try to do it just the same. 

OK, so a form starts off blank with empty fields. 
The user skips entering some of the data and 
submits the form with the fields still empty... oh 
man, I think I’m starting to have a panic attack! 

Calm down, it’s OK. It’s not your fault. Look, 
it’s not your responsibility to worry about data 
that never changes. Remember, you’re name is 

onchange. 

But what about the scenario we just talked about 
where I fail the script miserably on the empty data 
and the world starts coming apart at the seams? 

Let’s not get carried away. Like I was saying, it’s 
not your responsibility. So if a script is worried 
about validating a form to make sure fields aren’t 
empty, it really shouldn’t be using you to trigger the 
validation code. 


Well that’s a relief, even if it does mean I might not 
be of use to anyone anymore. Wait, I think I feel the 
panic coming on again... 

Hang on, try not to react so much. Even though you 
may not be ideal for triggering validation code, that 
doesn’t mean scripts aren’t sometimes interested 
in whether data has changed or not. What about 
a form that lets people edit data that gets stored 
away? You would make perfect sense for only 
allowing a save if the data has truly changed. 

Hey, that’s true. So you’re saying I still have a 
purpose? 

Absolutely! So there’s no need to keep beating 
yourself up. 


Thanks. That’s very reassuring, 


You’re welcome. All right, I’d love to chat some 
more but I have some data to validate... see ya! 
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move along nothing to see here 


Checking for... something 

Back at Bannerocity, Howard knows that at the very least he needs to be 
validating the Bannerocity form to make sure all fields have data. But 
from a JavaScript point of view, this involves looking at things from an 
odd perspective. More specifically, instead of checking to see if a field 
has something, you have to check and see if the field doesn’t have 
nothing. In other words, “something” equals “not nothing.” 


Soitiefteng = Not nothing 

The reason for this counterintuitive thinking is because it’s easier to check 
a form field for emptiness than “fullness.” So a first line of defense for data 
validation involves checking to see if a field is non-empty. 



Howard’s validation function must respond to the onblur event for each 
form field in order to perform the non-empty validation. For example: 


TV -f ield uniquely 

so »*b be autsstd 心。 州 


<input id="phone" name= n phone" type= n text" size="12 



onblur= n validateNonEmpty(this);"/> 


The validalc/VohEn.p-tyO -Puhd-tioh is 
ulldd ih \rcspohSC -to Ohbluv- -to thtdc 
see i-P the -field is hoh—crwpty. 




The -PoVm -field objcd*t is 
■ passed m*to 
us'm^ *thc 七 his kcy>wo\rd. 


The this keyword is used in this code to reference the form field itself. By 
passing the form field as an object to the validation function, it gives the 
function an opportunity to access both the value of the form field as well 
as the form object that holds all form fields, which is sometimes helpful. 
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forms and validation 


Validate fields to make sure you have "wot wothiwg" 

Each form field has similar code that wires the onblur event to the 
validateNonEmpty () function. By tying the onblur event of each 
field to the function, all of the data on the form gets validated. 


<input id= M name" name= n name" type= M text" size="32 


onblur="validateNonEmpty(this); n /> 


TV number (orns Acid 

tails i\\t validation 

sec IS d 



TliC -Po\rrn -field 乙 alls 
"the ▽dlidd'tioh -Puh^tioh "fco 

i-P thc\rc is 


function validateNonEmpty(inputField) 

// gee if the input value contains any text 

if (inputField.value. length == 0 ) { 

//The data is invalid, so notify the user 
alert ("Please enter a value . M )； 
return false; 


The pvopev-'ty 

v-cveals ihc ^urwbcv- of 
dhav-adtev-s'm d 


isjiO ^ov>C numkev so 

知 avy alcrt 

)y\d V-cW^ s ^ SC * 


Thc\rc js_a ha^e so 
the -Puh^tioh simply 
\rc-tu\rhs tv-uc. 


return true, 


PIcjgc cnicr a value. 


In this example, the return values of the validateNonEmpty () 
function aren’t used. Their purpose is to communicate back to the calling 
code the result of the validation: true if the data is OK, or false if it’s 
not. A little later we’ll see how these return values are used to make sure 
form data is OK before submitting a form to the server for processing. 


A non-empty validation 
function ckecks to make 
sure form fielcts aren’t 
left 





Can you think of any drawbacks to using an alert 
box to notify the user of bad form data? 
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let’s not annoy users 


Validation without aggravating alert boxes 

It didn’t take long for Howard to realize that alert boxes aren’t ideal for 
notifying the user of invalid data. He’s getting lots of complaints about all of 
the alert boxes that pop up when users are trying to enter Bannerocity orders. 
We’ve all become somewhat conditioned to be annoyed when a pop-up 
window interrupts the online experience, and data validation is no different, 
even though the alert boxes in this case are trying to be helpful. 



Howard’s solution is a “passive help system,” which doesn’t involve alert boxes, 
and therefore doesn’t interrupt the flow of data entry. This passive approach 
to notifying the user does require adding a few new HTML elements to the 
form, however. 


A Mw flT7V|L- provides 

a (or displaying validaiioK 
Kelp messages. 



The new HTML help element represents a significant improvement over alert 
boxes because it doesn’t get in the way, yet it still conveys the same information 
to the user. And all it requires structurally is the addition of an HTML <span> 
tag that is named to match the form field that it sits next to. This new <span> 
tag appears in the code for the web page form just below the input field. 


A *to 

validate NonEw'f ) 
y\o^n passes a\oY\^ 七 he 
Viclf element 


<input id= M phone" name= M phone" type= M text" size=" 

onblur="validateNonEmpty(this, document•getElementByld('phone help')) 



<span id="phone help" class= M help"></span> 




The <spah> tag is mrtially 
but it does have av\ 
七 ha 七 dssodid'tcs i*t with "the 
phohC hurwbc\r -PoV-m -field- 



ID 


TVic style <^lass »s used -to 
format tVic \\t\y m a ved 
\-talit Wt, al 七 “o— ’I 七、 V^av-d 
•bo see v-cd t^'is 


These bm IDs rwus-t 
•m ov-dev- -Po\r help "twt "fco be 
displayed -Po\r 七 he ’mpu 七 -field- 


/> 



With the span element in place that houses the help text, all that’s missing 
is the code that actually displays the help message. And based upon the 
new second argument to the validateNonEmpty () function, there’s a 
good chance that function will be responsible for making sure the help text 
gets seen by the user. 
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forms and validation 


A more subtle wow-empty validator 

Howard’s ingenious passive help message solution reveals itself in a new 
and improved validateNonEmpty () function that now also handles 
the task of setting and clearing help messages for a form field. 

function validateNonEmpty(inputField, helpText) 

// See if the input value contains any text 
if (inputField.value.length == 0) { 

//The data is invalid, so set the help message 


if (helpText != null ) 匕 - 

helpText.innerHTML = "Please enter a value ."； 

return false; 


The help text objedi is 
passed i^-fco -the 


piv-s*t rnake suve 

^clf crisis 

f- v>ull), sti 
•lis f^rofe^rty *to 

i\\t Keif message- 


else 


//The data is OK, so clear the help message 
if (helpText != null) 


helpText.innerHTML 
return true; 




It’s irwpovta^t "to also 
dear 七 he help -toc-t or\tt 
data has bccr> c^icv-cd 
m-fco d -Pov-rw -field- 


Data validation in Bannerocity is now greatly improved thanks to the new 
passive help approach, which still uses a healthy dose of JavaScript but in 
a much cleaner way, at least in terms of streamlining the user experience. 


tfitsr ZIP oode th® locatto^: f Pftas* #frl#r ® vmUm. 
enter _ cjaie for tne message is shown: P_ 


Entnr numH ： | Seth Tinselman 
Enter your phnn& number ： 「 

Cntsr youc am ail address: 


enters 相山 0 : 

e ： - 


Ptoifscj 


灼 dd'td is nrtiss'm^ 

Ba^^cv-odi-ty now jus 七 display 
d passive help message- 


pmM tfnltff a vaiiM. 


Name da*ta is 


fv-cscr>*t so 七 he 
message 
sho>w^- 


hclf I 
•isy/ 七 


That*s much better...no 
alert boxes...less intrusive. 


O 
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does this fit all right? 


Too much of a good thing 

As it turns out, non-empty validation works great but too much data 
can be as problematic as not enough. Check out Howard’s latest banner, 
which reveals a new problem with the Bannerocity order form. 



Dude, where’s 
the rest of 
our banner? 


I dorVt know, but 
flyboy Howard is 
about to get a strongly 
worded text message! 






What’s wrong with this banner, and what 


can be done to solve the problem? 
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forms and validation 


Size matters 


ttt 


The trouble with Bannerocity is that Howard’s aerial banner can only 
hold 32 characters but the message field on the order form has no limit. 
Sure, it’s great that the user gets warned if they don’t enter a message at 
all, but a message that is too long still gets through with no problem. And 
this is in fact a big problem for Howard! 


The usev* has 
"too mu 匕 h text but 
BahhC\ro^ity docSh ； t tell 
them it s a problem. 



is rwovc text 
"thah the ddh 

hold ； the sd text acts 
chopped-, hot good* 


Attempting to show unlimited text in a limited space doesn’t work, and 
ultimately results in unhappy customers... like Seth and Jason. The 
solution is to validate the message field so that it has a maximum length. A 
more customized help message for the new validation is also a good idea 
to make sure that users understand the message size limitation. 


TKis \S y/’rtiVm 

七 he SZ-tiiav-ad*tcv limit 



T\\t 七 e% 七 ov\ loairmCV" 
just C.oir\S"tv3i^C(i 

v/i 七 iVm *tKc siz^ limit 


r^l^arpen your pencil 


Write pseudocode that shows how a new Bannerocity length 
validation function will work, making sure to validate both the 
minimum and maximum lengths. 
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the long and short of it 


c^Jharpen your pencil 

Solution 


The av*gurwChts 

rwmLchgth 3iv\d 


Write pseudocode that shows how a new Bannerocity length 
validation function will work, making sure to validate both the 
minimum and maximum lengths. 



rwaxLchgth would be (^icldj/aluc is sho\r£c\r *tha^ OR -fidd\/c|luc is lo^c\r 

set "to I -fov* the 

Bahhcv-o^ity bahhev- text. .b?)P.. 

&sc 

Clcav- help 


Validating the length of data 

The role of the new validateLength () function is to check and see 
if the value in a form field adheres to certain minimum and maximum 
lengths. In the case of Bannerocity, the function is primarily used to limit 
the length of the banner text field, although it does enforce a minimum 
length of one character as well. It’s unlikely that Howard will find a client 
who wants to fly a letter L by itself, for example, but the main idea is to 
make sure there are no more than 32 characters and no less than one. 



iidateLength (minLength 

W 二二 匕 ^utField, 

helpText )； 


In addition to the minimum and maximum lengths to be enforced by 
validateLength (), the function also requires two more arguments for 
the input field to be validated and the help text element used to display a 
help message. That makes for a total of four arguments to the function. 


waxLeiigth 

The maximum amount of text 
allowed in the input field. 


Enter me banner message: | Mandango...the movie seat picker for tough guys! Pfo^so enter q vaf\jc f to 3Z eftaraefera- fn i&ngtn. 


miwicwgth 

The minimum amount of text 
required in the input field. 


jwputField 

The input field whose length 
is being validated. 


idpTcx - 

The element in which help 
text is to be displayed. 


〈input id= n message" name="message" type= M text" size="32 



<span id="message help" class="help n ></span> 


The validateLength () function takes the value of the input Field 
argument and checks to make sure it is at least as long as minLength but 
no longer than maxLength. If the value is too short or too long, a help 
message is displayed in the helpText element on the page. 




306 Chapter 7 
















forms and validation 


BULLET POINTS - 

■ Every form field is accessible as a JavaScript object. 

■ Within a form field object there is a property called 
form that represents the entire form as an array of 
fields. 

■ The onblur event is fired when the input focus 
leaves a form field, and is a great way to trigger a data 
validation function. 


■ Alert boxes are a very clunky and often annoying way of 
notifying users of data validation problems. 

■ A passive approach to validation help is much more 
intuitive and less of a hassle for users. 

■ The length property of a string reveals the number of 
characters in the string. 


Finish the code for the validateLength () function, making 
sure to pay close attention to the arguments being passed to it. 

function validateLength(minLength, maxLength, inputField, helpText) { 

// See i-f "the value 乙 。灼 ta’ms a 七 lcas*t bu*t y\o move 


窄 parpen your pencil 


// The is 'mvalid ； so srt help r^cssajc 


// The ddia is O^C, so dlcav- -the help message 
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sharpen solution 


(^Jharpen your pencil 

Solution 


Finish the code for the validateLength () function, making 
sure to pay close attention to the arguments being passed to it. 


Chcdk bo*tV> 


function validateLength(minLength, maxLength, inputField, helpText) { 

// See i-f value doir\*ta*ms a*t leas 七 bu*t y\o move dhav-ad*tc\rs 

i-f (value-|| { 


// The dd*td is mvalid ； so sc*t *tiic help message 




Message problem solved 

Howard is relieved that the banner length problem is solved. 
Short of buying a longer banner, he didn’t have any other 
good options, so attacking the problem at the JavaScript level 
turned out being a good idea. At least users now know the 
limitations of Bannerocity banners up front before they order. 


The help text how dalls 


out a b^hhev* 


message 


"that exceeds "the limit. 
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forms and validation 


What’s really so wrong with alert 
box validation? Don’t most people realize 
that an alert box isn’t a pop-up ad? 

While it’s probably true that most 
people realize a JavaScript alert box isn’t a 
pop-up ad, it still doesn’t eliminate the fact 
that alert boxes are regarded to be highly 
intrusive. Anything that requires the user to 
stop what they’re doing and click something 
in another window is disruptive. So while 
alert boxes have a place in JavaScript 
programming, data validation isn't it. 

The usage of this in the 
onblur code for form fields is still 
confusing. Is the form field an object or is 
the form itself an object? 

The answer is both. Within the context 
of an HTML element, the this keyword 
refers to the element as an object. So in the 
case of a form field, this is a reference 
to the form field object. Within a given form 
field object, there is a property called form 
that provides access to the entire form as 
an object. So when you see this . form 
in the onblur code for a form field, what 
you're really seeing is a reference to the 
form itself, as an object. 


The purpose of this . form in the 
Bannerocity code is to gain access to the 
help text element that is associated with 
a particular input field. Remember that 
this . form is a reference to the form 
object, which is also an associative array 
containing all of the form fields. So you can 
quickly access a field named my—field 
using array notation with the code this . 
form [ f, my_f ield" ]. You could also 
use getElementByld (), but the 
form approach is a little more concise. 



When a help text element is 
associated within an input field, what 
is the significance of the name and id 
attributes of each? 

The id of a help text element is 
based upon the id/name of its associated 
input field but it’s not exactly the same. 

More specifically, the help text ID uses 
the input field ID with the text _help 
tacked on to the end. The point of this 
naming convention is to create a clear and 
consistent connection between an input field 
and the element that displays help text for 
the field. In reality, you can name the help 
text element IDs anything you want as long 
as they are unique and get properly passed 
into the validation functions. 



Why is it necessary to clear the 
help message when data validates as 
being OK in a validation function? 

Keep in mind that the point of help 
text is to give the user help when there is 
a problem. If the data entered into a form 
field checks out OK, there is no problem 
and therefore no reason to display a help 
message. And since a help message may 
already be visible from an earlier validation 
on the same field, the safe play is to clear 
the help message any time a field validates 
with good data. 

What happens if a help text element 
isn’t provided as an argument to a 
validation function? 


The script searches and searches for 
the missing element, overheats the page, 
and leaves a charred mess in the browser. 
OK, not really. By design, the passive help 
system in Bannerocity quietly disappears 
if the text help argument isn’t used in a 
validation function. So the help text for the 
input field just isn’t shown. This means the 
help text system is designed to be entirely 
optional. What’s nice about this approach is 
that it allows help text to be used as much 
or as little as desired; even with individual 
fields, you aren’t forced to add a help text 
element for every field on a form. 

The validation code that checks to see if the 
htmlText argument is non-null is what 
allows the help text element to be optional. 

If the help text element is not null, it 
means the element exists and help text can 
be displayed. Otherwise, it just does nothing 
because the element is missing. 

Doesn’t the size attribute of an 
HTML form field already limit the length 
of the field? 

The HTML size attribute only limits the 
physical size of the form field on the page—it 
has nothing to do with limiting how much data 
is entered. As an example, the ZIP code field 
in Bannerocity has its size attribute set to 
5, which means the field is sized on the page 
to fit about five characters of text. It is possible 
to limit the actual length of text in HTML using 
the maxlength attribute, but there is 
nominlength equivalent. A validation 
function provides the utmost flexibility in 
controlling the length of characters that may 
be entered into a field, although in the case of 
a ZIP code it would really be better to not only 
look for five characters of text, but to also make 
sure that they are five numbers. Maybe this is 
something Howard should consider adding to 
Bannerocity... 
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where you at? 


Right bawwer, wrowg location 

Howard’s online form continues to cause problems despite his best 
validation efforts. This time a ZIP code has been entered incorrectly, 
resulting in Howard flying around for several hours over the wrong 
location. Perhaps worse than Howard’s wasted time is his unhappy 
customer, Duncan, who missed out on some donut sales. 




Enter ZIP code of Wie location: |7412l 




n，s Donuts--** 






A 匕 lc"t*tcv- I 

is Chicircd ihS-tcad 

"the hum be V 

bu*t it 

I^isih-tcirpvc-tcd as 

"the K>umbev~ /. 




74122 


74125 


74124 


74128 




74125 


74127 


74129 


74126 


74130 


Ddncorfs Dornfe 




mmL 


In this situation, human error adds to data entry 
error and creates a really big mess. The customer 
accidentally typed an I instead of the number 
9 since the keys are near each other on the 
keyboard. Howard interpreted the I as a 1, and 
ends up flying a banner over the wrong location. 



O 

O 


Ha ha, I couldn’t have planned 
that one better myself... 
Duncan^ banner is getting 
shown in the wrong location! 



Rcwcwkcv- f*vav\k»c, 
puv\6a^s V^o-tdo^ 


? 





货备〜 _ 

How would you validate a ZIP code? 
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forms and validation 


Validating a ZIP code 

Howard’s problem has to do with a ZIP code not getting entered 
properly. At its simplest, a U.S. ZIP code consists of exactly five 
numbers. So validating a ZIP code can be as simple as making sure 
the user enters exactly five numbers... nothing more and nothing less. 

a a n a n ^ 

~ ~ ~ ~ ~ 


bio lciic\rs allowed- 


37205 

0^1 y 



^Ij^rpen your pencil 


Finish the code for the validateZIPCode () function that 
validates ZIP codes to make sure they are exactly five characters 
long, as well as numeric. 


function validateZIPCode(inputField, helpText) { 

// First see if the input value length is anything other than 5 

if ( ) { 

// The data is invalid, so set the help message 
if (helpText != null) 

helpText. innerHTML = " Please enter exactly five digits .’，； 


// Then see if the input value is a number 

else if ( ) { 

// The data is invalid, so set the help message 
if (helpText != null) 

helpText. innerHTML = " Please enter a number .，'； 


else { 

// The data is OK, so clear the help message 
if (helpText != null) 

helpText.innerHTML =""; 
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sharpen solution 


^Jharpen your pencil 

Sobtion 


See l-f o( ^-IP toAc 

s*tv*m^ is av>y*t^m5 o*tKcv- •tha 灼弓 • 


Finish the code for the validateZIPCode () function that 
validates ZIP codes to make sure they are exactly five characters 
long, as well as numeric. 


function validateZIPCode (inpjutField, helpText) { 

// First see if the input lvalue length is anything other than 5 


if ( 'mputFidd.value-^ 


// The data is invalid, so set the help message 
if (helpText != null) 

helpText.innerHTML = "Please enter exactly five digits. 

-false smdc ^ 

七 V^c ZIP Me i 


\retum -false ； 


// Then see if the input value is a number 


else if ( isKaKf'mputFicld.valuc) 




The is/S/a/VO -pu^d-tio^ dhcdks -fco 
see i-f a value is Moi a Number. 


// The data is invalid, so set the help message 
if (helpText != null) 

helpText.innerHTML = "Please enter a number."; 

■ 〜 Rc*tuvr\ -false svntc Z-IP 乙 0 心 
is hO*t a ^urwbcv - . 


-false ； 


else { 

// The data is OK, so clear the help message 
if (helpText != null) 

helpText.innerHTML =""; 


v-c*tu\nr\ *brucj 


Retu\rh t\ruc -to ihdidatc that 

七 he Zfp dodc validated OK. 



It isn’t always safe to assume postal codes are purely numeric. 

If a web form is capable of receiving postal codes for addresses outside of the 
- r # -1 U.S., then validating for a purely numeric ZIP code won’t be such a good idea. This 
VV«l^n II # j s because plenty of other countries rely on postal codes that contain a mixture of 

letters and numbers. Additionally, full U.S. ZIP codes actually consist of 9 digits in 
the form #####-####, in which case the hyphen would make the ZIP code data non-numeric. 
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forms and validation 



The Bannerocity validation functions are neat and 
all, but what happens if the user ignores the help messages 
and clicks the Order Banner button with bad data? Does 
the form still get submitted to the server? 


Bad data should never make it to the server. 

Yikes! All the data validation code in the world won’t matter if 
the user can sidestep all of it by clicking a button and submitting 
the form despite a bunch of good intentions. Bannerocity’s fatal 
flaw is that it doesn’t subject the form fields to validation before 
submitting the form, which is why bad form data is currently 
capable of getting sent along to the server. 


Kohc o( -the daia valida-tioh v^aii^s i-f 
七 he usc\r has -the option o-f i^ho\rih 0 it 
submi-t-tihg the -Pomirw with bad daia anyway. 


——-1 

OCITY ^ 


ifie banter mMsapB ； 

Enlec bcabon: 

Ejuw die date fw tie Ip t# sJiown: 


Enifer yoyr Mmft: | 

Enim ynur phnwifl numb«r: 

Eflivr yQur smaH wWna *； 


-- ftMse i/sruv i Is 32 eftaraefera *^0^- 

M-Kfiiy Avs 

角 mss eflfflf a 
PftwM# wrifrjra vafu#. 


Pio/Km arafflri 


bu*t*toh 

^ceds some validaiioh 
tc-Po\rc fassrng the 

pfMse 奶 谢鼉挪 抓 *to "the sc\rvc\r. 


Ordtr Bdrin£r J 


A v*cally vobus-t 
applidaiioh would dls< 


validate -the daia oh the 
sevvev just io be safe. 


Bannerocity needs another function, and its job is to validate all 


of the form fields before submitting the form to the server for 


processing. The custom placeOrder () function is tied to the 


Order Banner button, and gets called to make a final round of 


validation before completing the order. 


<input type="button" value= M Order Banner" onclick= M placeOrder(this.form);" / > 
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place your order and look up 


jO 


The p]aceOrJer() 
function 


Up Ckse 



T\\t -fur>dtiov> c^pcdts d *fov-m objcdt *to 
be passed as rbs o^ly av-^umc^-t so 
i 七匕扣 autss mdiv'idudl +o\rm -fields. 



-Pov-m -field ahd help 

text dement is autssed 
tli\rough the -fov-rw object 
usmg a\r\rav hotatioh. 


function placeOrder(form) { 

if (validateLength(1, 32, form["message"] , form["message help"]) && 
validateZ IPCode (f orm [ n zipcode” ] , form [ M zipcode help’’]) && 
validateNonEmpty (form [ "date" ] , form [ "date help’’]) & & 
validateNonEmpty(form["name "], form["name help"]) && 
validateNonEmpty(form["phone "], form["phone help"]) && 

validateNonEmpty(form["email "], form["email help"])) { 

// Submit the order to the server 


/Vlost Jc *tiic 
is or>c bi^ \(/else 

乙 alls 

vdlidd'tion oy\ 

eddii -fovw\ -field- 



The submitO method is called io 
submit the -fovrw -fco the scv-vcv* i-f 
the -Pov-m -fields validate 0i(. 



Vdl'idd-b'io^ pv-oblcw' 4 ⑼ 

扣 oV"dcv* is s'i^ir\i*f C^ou^ *to 

y/av-v-a^t alcv-t b。％. 


thereiare no 。 

Dumb Questi 9 ns 


How does the placeOrder () function control 
whether or not the form gets submitted to the server? 

First off, the if/else statement in the function is structured 
so that the conditional involves a validation of every field in the form, 
which means if any of the form data is invalid, the else clause 
will run. The else clause only contains a call to the alert () 
function, so nothing else happens if the function makes it into this 
clause. On the other hand, if the data validates OK, the submit () 
method is called on the form object, which submits the form to the 
server. So the submission of the form to the server is controlled by 
calling or not calling the form’s submit () method. This method is 
the JavaScript equivalent of an HTML submit button. 


I thought alert boxes were bad for data validation. What’s 
the deal? 

In many cases they are, but the real issue here is when it’s OK 
to interrupt the flow of a page to display a pop-up message (alert) 
and require the user to read a message and click OK. Since the 
Order Banner button is only clicked when the user intends to submit 
an order, it’s worth making sure they know there is a problem with 
the data. So in this case the problem is severe enough that an alert 
is appropriate. And don’t forget that passive help messages are still 
displayed to help guide the user to a fix. 
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Timing is everythiwg...datG validation 


Unfortunately, Howard’s ZIP code and form submission validation fixes 
provide only a fleeting sense of relief because there is now an entirely 
new problem. He no longer flies over the wrong location thanks to 
validated ZIP codes, but now he finds himself sometimes flying banners 
on the wrong date, which is perhaps even worse. Something is amiss 
with the fly dates that are being entered... 



-typo resulted m d date 
lc*b*bcv" o 'ms*tcad oi 3 七 SCCmS 
y\o oY\t a ^ 6 o\rv-ct*tly. 

Wowavd ihtcirpirc-tcd the 
letter o 3s d 2 ^v*o, -flew 
Oh the \0{\\ ihS-tcad o( the 
i^hded dale, the l%h. 


— ■— 




Thursday 

Friday 

Sunday 

Monday 

Tuesday 

Wednesday I 

n 




J 

2 


5 

— 6 

7| 


^ ' 

11 

C Well, here it is 
f Monday and I see no < 

V trace of mv banner! 1 _ 

L J 


ii 





16 


r 


L 

i - 

: 

hr 

| 20 

21 

1 22 

r 









25 


26 






30 


How could Howard validate the fly date form field so that 
dates conform to a specific pattern, such as MM/DD/YYYY? 


El l ie is hot 3 
hppy ^us-tomcv-. 
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dating issues 


Validating a date 


Howard apparently isn’t going to get by with just checking to see if the user 
entered data into the date field — he’s going to have to actually check to see 
if a valid date has been entered. The key to validating a date is deciding on a 
specific date format, and then enforcing it. A common date format involves 
specifying the two-digit month, then the two-digit day, then the four-digit year, 


separated by slashes. 


MM/DD/YYYY 



丁 he mohth dhd 

day dohsis-t <^p -two 


The ycav ^ohsis-fcs o-f -Pouv 
匕 … y/e’d hate {o 

d pvobl Crw/ 


^CM foV-t'ioy\ 

V 一 da-tc is scfav-a*tcd by 
a -fov>/ 3 v*di slash. 


Nailing down a format for a date is the easy part... coming up with code to 
validate a piece of data against that format is where things get messy. There 
are some powerful string functions that make it possible to tear a string 
apart based upon a certain character, such as a forward slash. But it’s a fairly 
complex endeavor breaking apart a string into pieces and then analyzing each 
piece to make sure it is numeric and that it adheres to a certain length. It’s 
kind of like the ZIP code validation challenge taken to the extreme. 

Let’s work through the steps of how a date validation function might work: 

o Break apart the form field value into a collection of substrings, 
using a forward slash as the basis for separating the string. 




05/lo/2008 


/ 


” 05 ” 



"2008" 


”lo" 



Analyze the month substring to make sure it is exactly two 
characters in length and that it is a number. 



Analyze the day substring to make sure it is exactly two 
characters in length and that it is a number. 



Analyze the year substring to make sure it is exactly four 
characters in length and that it is a number. 



Ignore any other data following the second forward slash. 


While this series of steps isn’t necessarily nightmarish from a coding 
perspective, it seems like an awful lot of work to validate a relatively 
simple pattern. 




Tho 


lo 



Two dhav-ad-tev-s 
but hot a 

112008" … problem/ 

广 O 

( s _pour 

0 — 

No iv-ailmg data. 
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Wouldn t it be dreamy if there was a 
better way to validate data than hacking 
apart strings...A girl can dream, carVt she? 
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havens you heard that expression? 


Regular expressions arew't "regular" 


JavaScript happens to have an extremely powerful built-in tool called a 
regular expression that is designed specifically for matching patterns 
in text. A regular expression allows you to create a pattern and then apply 
it to a string of text, searching for a match much like a suspect in a police 
lineup... but with more cooperative characters! 



A match! 


Tall ， no glasses，skort kair 


A regular expression 
is used to matck 
patterns in text. 



TKc involves 

pliysidal atbribu 七 es 

<yc 3 pevso 灼 . 


The pattern describes physical properties of a person that are then 
matched against actual people. Regular expressions allow you to do the 
same kind of pattern matching with strings. 
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Regular expressions define patterns to match 


Just as a pattern for a police lineup might involve the height, 
hair style, and other physical attributes of a person, a text 
pattern involves a certain sequence of characters, such as five 
numbers in a row. Wait a minute, that sounds like a familiar 
pattern... a ZIP code maybe? 

Coh-taihs a 

Icttcv*. -、 Too 


▼▼A3492 n ^5280 ,f 



Pattern = ##### ^ 

/ 、 

/ The pattcirh involves 

/ a of exactly 

I ^umc\rid digits. 



，， 37205 n 



ff 007JB ff 


n 741265 ,f 


Coyrtams lette". 



Too vn 




Unfortunately, turning the five-digit pattern 
for a ZIP code into a regular expression 
isn’t all that intuitive. This is because regular 
expressions rely on a very compact, and 
also somewhat cryptic syntax for describing 
patterns of text. It’s not easy to immediately 
see that this regular expression can be used to 
match a five-digit ZIP code: 



TV^C must sWt 

i\st deemed ?a 七七州 
allowed. 


Y\0 


Y\OY\- 



TV single digit must 
repeat ^ -times. 


NK 


Pattern = / A \d{5}$/ 


All v-c^lav- cv^rcssio 灼 s 

avc c^loscd by 
-fo\rv/3V"d sUsiics 



A sihglc 

仙喻 id digit 


V 


TV must tv\d 

W\i\\ 七 Wis paUcm. 


o 



Don’t panic if this regular expression 
stuff seems a bit overwhelming. 

It will make a lot more sense as we work 
through some practical validation examples. 
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regular expression break down 


Regular expressions exposed 

Creating a regular expression is sort of like creating a string 
literal except that the regular expression appears inside of 
forward slashes (/ /) instead of inside quotes or apostrophes. 




^a'»v- -fov-Y/av-d 
sldsV^es is used *to cy\tlosc 


a \rc5ulav c^css'iow. 


Regular expressions 
always start and end 
witlt a iorwarct slask. 


Within the expression itself, a collection of special symbols known as 
metacharacters are used in conjunction with letters and numbers 
to create highly descriptive text patterns. The good news is that it isn’t 
necessary to know every nuance of the regular expression “language” in 
order to create practical regular expressions. Following are some of the 
more commonly used regular expression metacharacters: 



it s just a period. 


Match any character 
other than a newline. 


\d 

Match any numeric digit. 



\w 


Ma^y mc*tathav-at*tcv-s 
s*tav**t v/i*th 3 backslash, 
vevy di-P-Pcv*cr>*t 七灼 
-fov>wav*d slashes 
used {o cy>dlosc a 
v-c^ulav- OCfV-CSSIO^. 


Match any alphanumeric 
(letter or number) character. 



\S 

Match a whitespace 
character. 


A 


The string must begin 
with the pattern. 


The string must end 
with the pattern. 


lVKi*tcspadc ’mdudes 
sf>a^es, tabs, 
ar\A vc*tuv-^s. 



丁 he stv-ih^ beih^ 

Ay text pv-ededihg 
the fattev-h. 


The pa*t*bcv"r\ must be 
vcv-y last 乩 m 
{}\t s-tv-'mj. 


Although these descriptions of the regular expression metacharacters 
are accurate, the metacharacters are much easier to understand when 
examined in the context of a real pattern... 
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Metacharacters represent more thaw om literal character 


/\w/ 

r 

瓜 y single 
^hav-ad-fcev-. 


A 





^av-at-tev-- 


Oy\t 出汐七 a 七 
i\\t be—” 
o<f a s*brm5. 


/\d/ 


A sihalc 


Metackaracters are 
symbols used to 
construct regular 


, 9 ie di 9 ii egressions. 


So there are several different approaches available in regular 
expressions for matching a single character. But what about strings that 
contain more than one character? Following are some more practical 
pattern matching scenarios: 


/ cat$/ 


1 


/\d/ 


ic tY\d <yc 



'taV 

a*t tY\d o\ a 

s*bnr^... 灼 o ma*tdiics| 


Or\t di 汐七 a 七 
kc 5 'my\'m 5 
o-f a stv-'mj. 




n 2 nite n 


"fy/O dii^xi'ts 3 *b 


diqrb 

</a ： 


" 007 " 


n catch 22 n 


tY\d o\ d stv-mj. 


/\d\d$/ 


Th\rcc digits 
m 3 \row. 




cat/ 




/\d\d\d/ 


appcaHhg ai the 
bcgihhmg o( a s-tv-'mg. 


Write a regular expression that matches a full U.S. ZIP code, which takes the form 
#####-####，and must appear by itself. 


you are here ► 


321 









exercise solution 



E%eftclSe 


Write a regular expression that matches a full U.S. ZIP code, which takes the form 
#####-####, and must appear by itself. 


The s-t\r*mg mus-t tt\A 

-the pa 七 七 ⑽. 




The rwus 七 s 七 airt 

>/i 七 h 七 he 

, lx , /^\d\d\d\d\a-\a\d\d\a// 

Slarttk 呼 br j. 人 • 

c%PV-cssioy\ v/rth 3 
•(*ov*v/3v*d sldsVv 




Ala-Uhcs exactly 
*(W digits ih a v-ow. 


T\\t V^as y\o special 
medy\m^ i*ts jus 七 
a ivyph ⑼ sepav-atm^ 七 ^ 

rtumbevs m *tV^c Z^IP Codt- 


Close i\\t vc^ulav c%pvcssio^ 
•tii ar\o*t^cv -fov-y/av-d slasiv 



Ala-Uhcs exactly 
*fou\r digits ih a v-ow. 


Prilling into regular expressions: quantifiers 

Any text that isn’t a metacharacter is matched as-is in a regular expression, 
meaning that /howard/ matches the text "howard" in any part of a 
string. Additionally, there are some other regular expression constructs called 
quantifiers that further refine patterns. Quantifiers are applied to sub-patterns 
that precede them within a regular expression, and provide control over how 
many times a sub-pattern appears in a pattern. 


★ 



Preceding sub-pattern must 
appear 0 or more times. 


TV sub-pattev-h is 
optiohal, and t^y\ appear 
humbe\r o-p "tirncs. 


{n} 

Preceding sub-pattern 
must appear exactly n 
times in a row. 


Co^Vol c^attly many 
■times a sub-fa4*bcv-r\ Uy\ affcav-. 


+ 

Preceding sub-pattern must 
appear 1 or more times. 


J\\t sub-\>a*t*tcv-ir\ IS 
扣 Y number 七 Wes. 


? ^ - 

Preceding sub-pattern must 
appear 0 or 1 time. 


The sub-pattevh is 

optional, but 匕如 
only appc«l\r oy\tt i-f 
it does appeav-. 


pavc^cscs av-c used *to ^v-ouf 
sub— pa*t*tcvr\s mutii as you youp 

^ai\\t^hta\ c%pvcssio^s. 


0 




Group characters and/or 
metacharacters together in 
a sub-pattern. 
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Pattern quawtificatiow 


Quantifiers allow regular expressions to be written much more concisely 
than with metacharacters alone. Instead of repeating sub-patterns 
explicitly, a quantifier can specify exactly how many times a sub-pattern 
should appear. As an example, the following pattern matches a ZIP code 
using quantifiers: 


/ A \d{5}-\d{4}$/ 


W\i\\ iiclp H 

\{!s y\o lo 呼 V" 

Y\tUssar^ bo out eaA di 少 t 


Quantiliers control 
tke numter oi 
times a sut-pattern 
appears in a 
regular expression. 


It’s possible to get very creative with metacharacters and quantifiers to 
create quite powerful regular expressions that match just about anything 
that can appear in a string. 




八 w*/ 


Ma*U^CS 叫 niAmbcV- O-f 

•mdudi% a 於 cw'fby stv—f 


A^y 乙 rwus*t appeav* 

erne ov* mo\rc "times … 

3 hoh-erwp-ty s-tv-ih^. 







/ (Hot)? ?Donuts/ 


Mattics c*i*tVicv- u Por\u*b ， 
OV- u tto*t Poy\u*b^- 







Match each regular expression metacharacter or quantifier to what it 
does within a pattern. 


\w 


$ 

\d 

+ 


* 


The pattern finishes at the end of the string. 

The sub-pattern is optional, and can 
appear any number of times. 

Match any alphanumeric (letter or number) 
character. 

Match any character other than a newline. 
Match any numeric digit. 


The sub-pattern is required, and can 
appear any number of times. 
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ask away 





• 命 

Match each regular expression metacharacter or quantifier to what it 
does within a pattern. 



The pattern finishes at the end of the string. 

The sub-pattern is optional, and can 
appear any number of times. 

Match any alphanumeric (letter or number) 
character. 

Match any character other than a newline. 

Match any numeric digit. 

The sub-pattern is required, and can 
appear any number of times. 


Q.* Is 


a regular expression a string? 


No. You can think of a regular 
expression more as a description of a 
string, or at least a description of part of a 
string. Regular expressions are closely tied 
to strings, and are used to match patterns of 
text that appear in strings, but they are not 
strings themselves. 


Can regular expressions be applied 
to other kinds of data? 

No, regular expressions are designed 
solely for matching patterns of characters 
within a string of text, so they only apply 
to strings. But that doesn’t limit them from 
being extremely useful in carrying out 
complex text-matching tasks that would be 
extremely difficult using strings alone. 



Dumb Questi9ns 

What happens if you want to match 
a metacharacter, such as a dollar sign? 

Similar to JavaScript strings, 
characters with special meaning in regular 
expressions can be escaped with a 
backslash. So to match a dollar sign within 
a regular expression, you would specify 
the $ character as \$. This same rule 
applies to any other character that has a 
special meaning within a regular expression, 
such as a ， * ， and +, to name a few. Any 
character that doesn’t have a special 
meaning can be placed directly in a regular 
expression with no special formatting. 

Do regular expressions have 
anything to do with data validation? 
Weren’t we originally trying to validate a 
date form field in Bannerocity? 


Ah, patience, young Jedi. Soon use 
regular expressions you will. Yes, the reason 
for this little detour into regular expressions 
is to work out a way to validate data with a 
complex format, such as a date or an email 
address. Bannerocity still needs plenty of 
help on the data formatting front, so there 
will be plenty of opportunities to apply 
regular expressions. Just hang in there a 
little while longer. 

How are regular expressions used 
in JavaScript? 

We're getting there...really! Regular 
expressions are represented in JavaScript 
by an object, which supports several 
methods for using regular expressions to 
match patterns within strings. 
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Master o? 

This week’s interview: 

The cryptic but powerful 
regular expression 


Head First ： So you’re the one I keep hearing about 
who is capable of looking into strings and recognizing 
patterns. Is that true? 

Regular Expression ： Yes, I’m a code breaker of 
sorts, able to look at a string of text and immediately 
pick apart patterns. The CIA could really use a guy like 
me... but they haven’t returned my calls. 

Head First: So you have an interest in spying? 

Regular Expression: No, I just love looking for 
patterns in text. In fact, I am a pattern, any pattern. 
Just give me some parameters about what you’re 
looking for and I’ll find it, or at least let you know 
whether it exists in a string or not. 

Head First ： Sounds great, but can’t the indexOf () 
method of the String object already handle string 
searching? 

Regular Expression ： Please tell me you didn，t just 
go there... that amateur doesn’t know the first thing 
about patterns. Look, if you need a painfully simple 
search feature that just looks for the word “lame” in a 
string, then indexOf () is your answer. Otherwise, 
you’re going to quickly realize that indexOf () falls 
way short of doing anything serious when it comes to 
analyzing strings. 

Head First ： But isn’t a string search a form of pattern 
matching? 

Regular Expression: Yes, and walking to the 
mailbox is a form of exercise but you don’t see it in the 
Olympics... yet. My point is that a simple string search 
is really the most simplistic form of pattern matching 
possible — the pattern is a static word or phrase. Now 
consider something like a date or a web site URL. 
Those are true patterns because although they adhere 
to strict formats, the specifics of what is being searched 
for is not static. 


Head First: I think I see what you mean. A pattern is 
a description of text that can appear in a string but 
not necessarily the text itself? 

Regular Expression: Exactly. It，s like if I ask you 
to let me know when a person walks by who is tall, has 
short hair, and no glasses. That is a description of a 
person but not an actual person. If a guy named Alan 
walks by matching that description, we can say that the 
pattern has been matched. But there could be plenty of 
other people who also match that description. Without 
patterns, we wouldn’t be able to look for a person based 
upon a description — we’d have to look for an actual 
person. So the difference between searching for a 
specific piece of text using indexOf () and matching 
a pattern using me is the difference between looking for 
Alan or looking for a person who is tall, has short hair, 
and no glasses. 

Head First ： That makes sense now. But how does 
pattern matching apply to data validation? 

Regular Expression: Well, validating data is 
primarily about making sure data fits a certain 
preconceived format, or pattern. So my job is to take a 
pattern and see if a string of text conforms to it. If so, 
then the data is considered valid. Otherwise, the data is 
bad. 

Head First ： So is there a different regular expression 
for matching different kinds of data? 

Regular Expression: Oh yes. And that’s really 
where most of the work takes place in using me to 
validate data — coming up with a regular expression that 
successfully models a data format. 

Head First ： That is very interesting. I appreciate you 
explaining the role you play in data validation. 

Regular Expression: No problem. I often have to 
explain myself...! suppose that’s a behavioral pattern. 
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regular expressions get validation 


Validating data with regular expressions 

As thrilling as it may be to create regular expressions purely for the sake 
of seeing patterns in text, we have a pressing need for regular expressions 
to help validate the date field in Bannerocity and get Howard back in 
the air. A regular expression in JavaScript is represented by the RegExp 
object, which includes a method called test () that is the key to using 
regular expressions for data validation. The test () method checks for 
the existence of a pattern within a string. 


maizes a 弓一 di 汐七 < 
ZIP 


Tke testO metkoct oi 
tke RegExp object 
is used to test a 
string lor a regular 
,, expression pattern. 

This object litciral auiomaiidally 】 * 

dV'C^'tcs 3 v^luc olh ihpu 七 

仑 dd, a st\rih^ is passed 
the method- 


var regex = / A \d{5}$/; 
if ( !regex.test(inputField.value)) 


The ZIP fcode is invalid! 


-testO method 
ytuvhs -false, the pattev-h 
-failed ahd daia is 
invalid. 



TV^C *tcs*tO method is 

tailed oy\ v-cjulav- 

c%fv-cssioy\ objedt 


Tiic V"C*tuv^ vsluc 七。七 0 is 七 w 
\( Yaiitrv\ w^aieMts i\\t 
s-tv'm^ ov -false o*BicvVisc. 


Although we could make a call to the test () method inside of each 
different validation function, there is an opportunity to create a general 
regular expression-based validation function that more specific functions 
can call to do the generic validation work. The following steps must be 
carried out by the general validateRegEx () function: 


Perform a test on the regular expression that is passed as an 
argument, using the input string that is also passed in. 

o If the pattern matches, set the help message to the help text 
that is passed as an argument, and then return false. 

❺ If the pattern doesn’t match, clear the help message and 
return true. 



- 二 sr 二 - 

helpMessage) 


Now all that’s missing is the code for the function, which as it turns 
out, isn’t so bad. In fact, the vast majority of this code already 
appeared in the other validation functions, so validateRegEx () is 
as much about code reuse as it is about creating an all-purpose regular 
expression validator. 
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h el P Messa g e)( 

// See if the inputStr data validates OK 

if (1 regex.test (inputStr) ) { d return false 

// The data xs 丄娜加 ， so W 咖 he# 

if (helpText \= null) ^ 

helpText.innerHTML = helpMessage; ^ ^ ^ ^ ^ ^ 

return false; 


else 


i \y ic. Terns ； *ChC 

is ihV^lid ； so the kelp 
message text is displayed. 


{ • 0K so Clear the help message and return true 

// The data is OK, so u 丄匕〜 

if (helpText 1= null) 

helpText.innerHTML = 

return true; 




l-f da*ba dhc^ks ou*t 0\(, 
•the help message is dlcav-cd. 


TTie v-cgula\r cxpv-cssioh, 
i h P u t help mess^^e 
help 

Jlerr^irt a\rc dll passed ih 
■s a\rgurwCh-ts- 


V V-C^ulav C^fvcssiort 
lis -bested a^a'ms-t i\\t 
•mfu 七 s{x'\Y\^ 


— i^^rpen your pencil 


Write the code for the validateDate () function, which calls 
both validateNonEmpty () and validateRegEx () to 

validate the date form field in Bannerocity. Hint: The function 
accepts two arguments, the date input field and its related help 
text element. 
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sharpen solution 


^harpen your pencil 

Sobtion 


TVic Ma\\daitUor^^biO 
“W is tailed *to 啪 ake 

SiaV^C *t^c -f ield >Sy\ *t 


Write the code for the validateDate () function, which calls 
both validateNonEmpty () and validateRegEx () to 

validate the date form field in Bannerocity. Hint: The function 
accepts two arguments, the date input field and its related help 
text element. 


valida*tcPa*tc(*m^u*tFicldl, hcIpU) { 
// Fi\rst sec i-f value do^*ta*ms dd*td 

The da-tc v-egulav ^ hcIpU)) 

C^P\rcssio^ is . r , 

passed the . ..!.—•. 

validatcRcgB^O 



// Then sec i-f value is a da*te 

\rc*tuv-^ y/a\\daitRt^^(/ A \d{l]\/\d{l]\/\d{ l \'}j/, mputFicld valuc, hcIpTc^i, 


u Plcasc cirrtcr a date (4-ov- Sample, Ol/l^/l ^7^)/0; 



-Po\rwa\rd slashes have a sytc\a\ 
rwcahihg ih \rcgul«l\r CXf\rcssiohS, they 
have -to be escaped with a backslash. 


The date v-cjulav t^rtss\oY\ uses 
mc*tatV>avad*tcvs av\A <\uar>*ti-f*icv-s -to tY\(ortt 
七 he 顚 /DD/VYVY ^rmat 


i^-el 




Its dcbd'tdble whethev" 

youir shifts will still be 
used \y\ the ycav- II 00. 


Y2100 is a long way away... 

Knowing that we won’t change centuries again for quite some time, it’s 
probably OK to allow users to enter the year as two digits instead of 
four. Realistically, it’s unlikely that any JavaScript code written today will 
survive the 90 or so years it will take to present a problem. Howard briefly 
considered a strict approach to future-proofing Bannerocity by sticking 
with four-digit years, and then decided that he can live with a tweak later 
if the code is still in use at the turn of the next century. 
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forms and validation 



Why is it necessary to call the validateNonEmpty () 


What if I really want to future-proof my script code? Is that 


function in validateDate () ? Doesn’t the regular 
expression already factor in empty data? 

Yes, the regular expression does inherently validate the date 
to make sure it isn’t empty, and the non-empty validation could be 
removed and the date would still get validated just fine. However, by 
first checking to see if data has been entered, the page becomes 
more intuitive to the user, offering up specific help messages based 
upon the particular validation problem. If no data has been entered, 
a different message is displayed then if an invalid date has been 
entered. The end result is a passive help system that feels as if 
it guides the user through filling out the form. This subtle usability 
enhancement seems to be a worthy tradeoff for how little extra code 
is required. 


Matching mm and maxes 


a problem? 

No, not at all. It's rarely a problem attempting to anticipate 
future needs and writing code that can adapt to those needs. In the 
case of Bannerocity, a four-year date field is certainly more future- 
proof than the two-year version. And keep in mind that if you really 
wanted to be crafty, you could allow the user to enter only two digits, 
and then prepend the number of the century to those digits behind 
the scenes. So the effect on the form is a two-digit year but the date 
is actually being stored as a four-digit year. 



Not all dates are 
in the format 
MM/DD/YYYY. 

It’s not necessarily 


The {} quantifier accepts a number that determines how many times 
a sub-pattern can appear in a string. There is another version of this 
quantifier that takes two numbers, which specify the minimum and 
maximum number of times a sub-pattern can appear. This provides 
a handy way to fine-tune the presence of a sub-pattern. 


safe to assume 
that all users are comfortable 
entering dates as MM/DD/YYYY. 
Many parts of the world reverse 
the months and days so that the 
format is DD/MM/YYYY. 


Cor>*tvol lioy/ m 扣 y 七 imes 


a 


min,max} 



sub-pa*t*tcv-^ 


mmirwurrv 


av\d 


Preceding sub-pattern must appear 
at least min times in a row but no 


appcav as a 


more than max times. 


/ A \w{5,8}$/ Some passwords dllow between -five 

-Poir the rhih/max {} 


— your pencil 


Rewrite the regular expression used in the validateDate () 
function so that it allows both 2-digit years and 4-digit years. 
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sharpen solution 


(^Jterpen your pencil 

Solution 


丁 I 化 ruih/max vcv-sioh Jc £he 
(} «\uahti-Pic\r sets the —m 
3hd maxirnurh hurubcv- o( yc3V" 

digit allowed ih the date. 


Rewrite the regular expression used in the validateDate () 
function so that it allows both 2-digit years and 4-digit years. 

/ A \d{z}\/\d{i}\/\d{zMi/ 




0 



Hang on a second. It looks as if the 
new date validation code also allows 3-digit 
years? That doesn’t make much sense... 


"The date \rcgula\r cxpv-cssi 
i-d\yi yc 
good/ 


Oh 


!3\rs Bs 



No amount of revisionist history 
can add JavaScript support to the 
first through tenth centuries. 

And since it wasn’t supported back then, there’s 
no reason to allow users to enter the year part 
of a date in the hundreds. In fact, there’s no 
need to let users order aerial banners at any 


point in the past if we can possibly help it. So 
eliminating 3-digit years from the validation 
code is an important fix, and will help prevent 
Howard from facing an onslaught of new 
Bannerocity data entry problems. 


BULLET POINTS - 

■ A regular expression 
matches a pattern of text 
in a string, and is enclosed 
within forward slashes. 

■ In addition to normal text, 
regular expressions are built 
out of metacharacters and 
quantifiers, which provide 
careful control over how a 
text pattern is matched. 

■ In JavaScript, regular 
expressions are supported 
by the built-in RegExp 
object, but it is rarely 
seen because regular 
expressions are typically 
created as literals. 

■ The test () method in the 
RegExp object is used to 

a testa regular expression 
pattern on a string of text. 
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forms and validation 


Eliminating three-digit years with this".or that 


Another very useful metacharacter in the regular expression toolbox is the alternation 
metacharacter, which looks and works a lot like the logical OR operator in JavaScript. 
Unlike the JavaScript OR operator, the alternation metacharacter involves only one 
vertical bar, |, but it does allow a pattern to specify a list of alternate sub-patterns. In 
other words, the pattern will successfully match if any of the alternate sub-patterns 
match. This is a lot like the logical OR operator because it’s basically saying “this, or 
this, or this...” 


this\that 

The pattern matches i 
this sub-pattern or the 
that sub-pattern match. 



/ small I medium | large/ 






fill w ahd %lue pill” 



Rewrite the regular expression used in the validateDate () 
function one more time, and this time make sure the year can 
only be 2 digits or 4 digits, and nothing else. 
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is this your real number? 


Rewrite the regular expression used in the validateDate () 
function one more time, and this time make sure the year can 
only be 2 digits or 4 digits, and nothing else. 

化 / A \d{l}y\d{^ . 

^ lets the pa-ttc\fh aucyi both 

2-digi-t ahd 午一 digit years. 




c^Jharpen your pencil 

Solution 


Leave wothiwg to chance 


Howard really likes the new, robust date validator that relies on regular 
expressions for precise pattern matching. In fact, he likes the validator 
so much that he wants to move forward and use regular expressions to 
validate the remaining two fields on the Bannerocity form: the phone 
number and email address. 


0 O ^ 


Bannerocity * Personalized' Online Skv Banners 


Looking good...but 
I want more! 




BANNEROCITY 


Enter Iha bannor me— : [Vlandango...macho movie ncKets! 
code o( the localon; [10012 

tnitrmidat^ofthe message to 肿細 n: 103/11/200 ■ ™ 咖 嘛，⑽心轉 

Enier ycuc name: | 

EnlRr ynuff phnnn numbflr: 

EnlHr ynuf Rmail adrir«EE 


O 


OrdiiJ Ednrtii 1 


C^ihl 1 


The daic -fo\rrw -field is now validaied 
a v*cjula\r c^p\rcssioir>, v/hidh is vc\ry adduv-a*tc 

aboiA 七 cr>-fo\rd*mg -the daic -Pov-mat. 

Howard’s idea about validating the phone number and email address on 
the Bannerocity order form is a very good one, but it does mean we’ll 
need to cook up some new regular expressions to successfully reign in 
those data formats. 
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forms and validation 


Caw you hear me wow? Phowc number 
validation 

From a validation perspective, phone numbers aren’t too terribly difficult to 
grasp because they follow such a rigid format. Of course, without regular 
expressions, they would still involve a fair amount of string hacking, but 
regular expressions make phone numbers a breeze to validate. Phone 
numbers in the U.S. conform to the following pattern: 



Pattern = ###-###-#### 


By changing the dashes in the phone number pattern to slashes and 
tweaking the number of digits, it becomes apparent that the phone 
number pattern is very similar to the date pattern. 

The date pattev-h doh-fov-ms a 
daitio MM/W/YYVY ov - 

us'mg the \d 

/ A \d{2}\/\d{2}\/\d{2 f 4}$/ 4 •▲ 如 d {} 〜 ㈣ 饮 


Sirvdc ttoy/av-d docs^-t 
or\ ou*tsidc o( \\\s lotal 

av-ca, its sa-fc *to assume a 
U S- r>umbcv *foVr«at 


The fho 的 C ^urwbcv- is similav *to 

i\\t date *t i*t uses hyphens 

*to scfav-a*tc 3 r>umbcv* or diyU 



/ A \d{3}-\d{3}-\d{4}$/ 


The validatePhone () function becomes fairly predictable thanks to the 
phone number regular expression and the validateRegEx () function. 


function validatePhone(inputField, helpText) 


// First see if the input value contains data 
if (!validateNonEmpty(inputField, helpText)) 


return false; 


// Then see if the input value is a phone number 
return validateRegEx (/ A \d{3}-\d{3}-\d{4}$/,- 



input Fie Id. valuehelpText, 


Please enter a phone number (for example, 123-456-7890)."); 
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was that dot com or dot org? 


YouVg got mail: validating email 


With the phone number validation task nailed down, Howard’s final 
challenge is to validate the email address field on the Bannerocity form. 
Like any other data, the key to validating an email address is to break the 
format down to a consistent pattern that can be modeled using a regular 
expression. 


^ o\r l 




Pattern = LocalName^DomainPrefix. DomainSuffix 



That doesn’t look too bad — an email address is just three pieces of 
alphanumeric text with an at symbol (@) and a period thrown in. 




All o( these email addresses 
doh-fo\rrw -to the Cr^il pattev-h. 
wovk is dohe hc\rc...ov is i-fc? 



Creating a regular expression to match this email pattern is fairly 
straightforward considering that everything is so predictable. 


The Crw^il ddd\ress rwus-t 
v/i-th ov\t o\r rwov-c 
alphanumeric tha\rad-tcv-s. 


/ A \w+@\w+\.\w{2,3}$/ 



The pev-iod must be esdaped 

s'mdc i*t is a spedial dhav-ad*tcv- 

•m v-ejulav Oppressions. 


"Hie dddv*css must 
tv\d with a Z- oy 5- 


Although this pattern does the job, something 
seems amiss. Do all email addresses truly 
adhere to such a predictable format? 


^ polloy/'m^ & symbol, ov\t or move 
dl^a^umevid cMaracitrs appear. 





What other variations of the email pattern 
are possible? Think about all the different 
email addresses you’ve ever seen. 
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The exception is the rule 


Email addresses are actually more complex than they appear to be at first 
glance. There are quite a few variations on the basic email format that 
have to be considered when formulating a reliable email pattern for data 
validation. Here are some examples of perfectly valid email addresses: 




Uhdc\rs^o\rc ih 
the loddl hX. 



aviator•howard@bannerocity. 


Period 

loddl 


com 


tty — 灼 m ^^ 

domd'm 


Powr ih 

"the suHix 



Wow, we really need a 
way to match optional 
characters to validate 
email addresses. 


Wyphchs ih -the 


seth+jason@mandango. 


us 


0 





Plus s'i^y\ m 
\oCd\ 

E^"tv*a domdih su-ffixes, 
is \rcally just cxtva 
peviods ih the domain hdme. 


Email addresses present the need to match optional 
characters in a pattern. 

As it turns out, there are several different optional characters that can be 
sprinkled throughout the parts of an email address that we previously 
handled as purely alphanumeric. We need a way to incorporate such 
optional characters into a pattern... 
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a cast of characters 


Matching optional characters from a set 


Another very handy regular feature that directly affects the email 
address pattern is character classes, which allow you to create tightly 
controlled sub-patterns within a pattern. More specifically, character 
classes excel at establishing rules where optional characters play heavily 
into a sub-pattern. You can think of a character class as a set of rules for 
matching a single character. 


[CharacterClass} 

Character Class is a set of regular 
expression rules for matching a 
single character. 



classes art 
dlv/dY s cy\C.loscd 七 Wm 


Within a character class, every character listed is considered legal for the 
character match, kind of like how the alternation between metacharacters 
lets you build a list of alternate sub-patterns. However, the result of a 
character class is always a match for a single character unless the character 
class is followed by a quantifier. A few examples will help put character 
classes into perspective.” 


/d[iu]g/ 



"dig" 

Boih s-tv'mjs av-c rwaidhes 
-Pov- 七 he 

"dug 11 


Ckaracter classes 
oiler an ellicient way 
to control optional 
cliaracters in a regular 
expression pattern. 


A$\d[\d\. ] * 



All ’martial || A Q Q C U 


Character classes are exactly what we need to whip 
the email address pattern into shape and add email 
validation to Bannerocity... 



Don’t forget to escape 
special characters in 
regular expressions. 

Characters that have 
special meaning in 


regular expressions must be escaped 


to include the actual character in a 


regular expression. Escape one of the 
following characters by preceding it with 
a backslash (\) : [\ A $. | ?*+()■ 
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Constructing an email validator 


It’s now possible to create a much more robust pattern for email addresses 
by factoring in all of the possible optional characters that can appear in 

the local name and domain name. 丁 hi s email addv-css 

affcav- oy\c or mov-c times. 


Pattern = 



LocalName^DomainPrefix.DomainSuffix 


^ ; +> as y/ell as -. 



The peviod is 

^ohsideved pav-t of 

七 he domdih suHix. 


Keep in mind that there are many different ways to approach the creation 
of patterns, including the email address pattern. It can be surprisingly 
tough to create a pattern that successfully addresses every little nuance of 
a particular data format. We’ve already experienced how once the general 
pattern design is worked out, translating it to an actual regular expression 
is fairly straightforward. 



alf^ar\umcvi^ 

by a 

peviod- 


Finish the missing code for the validateEmail () function, 
which is used to validate an email address in Bannerocity. 

function validateEmail(inputField, helpText) { 

// First see if the input value contains data 
if ( ! (inputField, helpText)) 

return false; 



rpeii your pencil 


// Then see if the input value is an email address 
return validateRegEx( 

input Fie Id. valuehelpText, 
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(^Jterpen your pencil 

Solution 


Finish the missing code for the validateEmail () function, 
which is used to validate an email address in Bannerocity. 


function validateEmail(inputField, helpText) { 

// First see if the input value contains data 


if (! vaIidateKty 

return false 


(inputField, helpText)) 



\s still 

called *m'it»ally *to cMctk a \ack ok data. 


The email vc^ulav expression uses most 
O-P *thc v-c^ulav c%fvcssior> >wc vc 
leaded *to validate email addv-css. 


return validateRegEx( 


// Then see if the input value is an email address 

+ @C\y/-]+(\.\y/{Z^})+f/ 

input Field. valuehelpText, 

“Please by\ email address (-fov- example, joimdoc@adme.dom). 



The domdm hdme 

乂匕 an be Z 

"to 午 

^hav-a^ic\rs ai the 

ti\A o-f -the s-tv-ihg. 


TV UaUa … C w fee 扣 al^a^umcv-»t, 

as y/cII as • ，一，一， ad 七 扣 d 七 be 

aUV^c start 乂 栋 c 士 rm 3 . 



I*P the Cr^ail vdlidd'tioh -Pails ； B help 
message is displayed tha-t dlaH-fics 
tlie mput -Pov-mat with 


A bulletproof Pawwcrocity form 

The aerial banner order data collection in Bannerocity is now sheer 
perfection thanks to some intense validation efforts. Howard is so 
excited that he has decided to fly a banner ad of his very own. 


Wowaird is -thnllcd -that 
he Uy\ gc-t badk -to 
山 t he lovcs...-f|yi h g/ 












Enter the banner mfissjsgft ： Mandango...macho movi ' 邊 Ats! 


Enter ZIP code of the tocation |l0012 
Enter ths dme for the ntes^gip Lo be ^horvwn: 


03/11/20^9 


The phohe humbc\r av\d email address fields how 
validate a“o\rdmg 匕 vc\ry stv-i^t daia -fov-^a-ts. 

/ 


Enter your nane: |Seth Tinselman 

Enter your plwnu number: (212) 555-5339 f%ssi ? 咖妝日 phom namber 123^56-7890). 

En^r your cimuil Hdd 關 ： | setT^mandaFgcT™ 所咖 oddruss ffur 卿 m 血 師 叫 

Order Banner 
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forms and validation 



JavaScPiptcposs 

Here’s a pattern you might recognize... a crossword 
puzzle! No validation required—just a few answers. 



Across 

1. The JavaScript object that supports regular expressions. 

2. Triggered when the data in a form field changes. 

4. A handy way to specify optional characters in a regular 
expression. 

7. This object contains all of the individual fields in a form. 

9. A special character in a regular expression. 

10. A description of a data format. 

12. This kind of validation checks to make sure a form field has 
data. 

13. Controls how many times a sub-pattern appears in a regular 
expression. 


Down 

I. Used to match patterns of text. 

3. Do this to form data to make sure it is legit. 

5. The method used to match a string with a regular expression. 

6. Triggered when the user leaves a form field. 

8. HTML attribute that uniquely identifies a field within a form. 

II. Handy in many cases but usually not the best way to notify 
the user about invalid data. 
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JavaScriptcross solution 



JavaScPiptcposs Solution 
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forms and validation 



V 嫩 



Fold the page vertically ^ at JavaScript tring to Wet forms? 
to line up the two brains J ° 

and solve the riddle. 一 

- Its a mcctmg o-f m’mds, - - - 



<r 



'Mandango...the movie seat picker for tough guys 

105012 
03/11/200 

212-555-5339 
setht@mandango 


c 

•Nf . 

，— 



"...macho movie seats 

100012 

March 11, 2009 

(212) 555-5339 
seth%t@mandango.us 


〆 、 


Looks fine to \ 

^ That data j 

me! This feels J 

y looks awful! \ 

( 

like surfing... j 





/ A val(ley IueIkrie) / 


/name|id$/ 


JavaScript lias a lot to oiler wet 

iorms, so it’s diHicult to make a valid 
argument lor any one tiling^ Tke 
answer almost certainly involves 
data on some level, tut Itow ， specifically? 
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8 wrangling tKe page 




Slicing and Dicing HTML 



with the DOM 


With the right ingredients and a 
few flicks of the wrist, I can whip 
up just about anything. I just have 
to get close to what Tm making... 
you know, be the pie. 




Taking control of web page content with JavaScript is a lot 

like baking. Well, without the mess... and unfortunately, also without the edible 


reward afterward. However; you get full access to the HTML ingredients that go into a 


web page, and more importantly, you have the ability to alter the recipe of the page. So 


餐 


JavaScript makes it possible to manipulate the HTML code within a web page to 

your heart’s desire, which opens up all kinds of interesting opportunities all made possible 
by a collection of standard objects called the DOM (Document Object Model). 


this is a new chapter 
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interface aspirations 


Functional but clumsy...mtcrfacG matters 


The Stick Figure adventure script from Chapter 4 is a good example of 
interactive decision making with JavaScript, but the user interface is a bit 
clumsy, especially by modern web standards. The alert boxes tend to feel 
tedious to navigate through, and the cryptic option buttons aren’t very 
intuitive, seeing as how they are simply labeled 1 and 2. 


Alc\rb CdiY\ get ahhoy'm^ 
and they break up the 
flow d -the application. 



t dedisioh op-fciohs avc 

， pvovidihg little 
ioh-tex-t -Poir r^akihg de^isiohS. 


Ellie realizes that it’s time to right the wrongs 
in the Stick Figure Adventure user interface … 
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wrangling the page 


describing scenes without alert boxes 

The problem with the alert box approach to displaying the scene 
descriptions is that the text disappears once the user clicks OK. It could 
be better if the description was displayed directly on the page to get rid 
of annoying alerts and bring the story into the body of the web page. 
This is what Ellie wants the Stick Figure Adventure to look like: 


TV hcwcsl Sti o( -Piles (or the 
Piguire Advchtu\rc \rcady -Pov- you at 

/ www.hcad-Piirs-tlabs^om/booksA-fjs/. 



TV sdcrvc 

avea ^ a??ca 行 ov> 仏 
as a \rcfla6cmcv>*b 
-fov alcv-t looses. 


/cah, the 
£.V"Yf*b>^ • ov\t 3 t'W'C. 





What do you think would be the best way for JavaScript 
to support the new scene description functionality? 
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where do you want me to put this? 


Creating space oh the page with div 

In order to display scene description on the page, we first need to define a 
physical area on the page as an HTML element before we can get serious 
about using JavaScript code. Since the scene description text appears as its 
own paragraph, a <div> tag should work fine for holding the scene text. 


TVic <d'»v> *ta^ V^as IP 

{\\t -for Koldmj 


<body> 


<div style=" m argin-top ： 100px; text-al ' 

text-align ： center"> 

^id-'sceneimg.. src-sceneO .png- a lt= ” sti k P . 

<div id-” C lgure Ad venture' 

ld — sce netext"></ div><br y> 

Please choose: 


/><br /> 




^ecisionl" value : 


I see that the <div> tag has its 
id attribute set. Can we use that 
ID to access the scene description? 


^2 V3.J_u0= n 2 1 


onclick="changeScene( 1 ) 
onclick="changeScene( 2 ) 



An ID is precisely how elements are accessed on 
the page, including the scene description <div>. 

It’s true, the id attribute of the <div> tag can be used as the basis 
for accessing the element on the page from JavaScript code. In fact, 
we’ve already done that... 



Watek it! 


The IDs of elements 
on a page should 
always be unique. 



Don’t forget that the whole 
point of the id attribute 
is to uniquely identify elements on a 
page. For this reason, they should 
always be unique within a given page. 
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wrangling the page 


Accessing HTML elements 


The getElementByld () method of the standard document 
object that we’ve used quite a lot. It allows you to reach within a 
page and access an HTML element...as long as that element has a 
unique ID. 


"This must -the id 

o-p the HTML 
clcmcht, ih this case a div. 


var sceneDesc = document • getElementByld ( n scenetext ’，） 

The div element is 
addessed us*m^ *i*U id a*t*tvibu*tc- 


With the scene description element in hand, we’re one step closer to 
manipulating the content stored in it. But there’s one other method 
worth investigating first. It’s the getElementsByTagName () 
method, which grabs all of the elements on a page of a certain kind, 
like div or img. This method returns an array containing all of the 
elements on the page, in the order that they appear in the HTML. 



广 — - T\\t Jc taj 

|r *i*tscl*f> y/i*tV)OU*b <>• 


var divs = document.getElementsByTagName("div") 




E%efictSe 


Write JavaScript code to gain access to the orange image in the following HTML body code, first 
using getElementByld () ， and then using getElementsByTagName (). 



Using getElementByld (): 


Using getElementsByTagName () : 
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exercise solution 



Write JavaScript code to gain access to the orange image in the following HTML body code, first 
* using getElementByld () , and then using getElementsByTagName (). 

iltaSe 

<body> 

<p>Before starting, please choose an adventure stress level:</p> 

<img id="green" src="green.png" alt="Relaxing" /><br /> 

< img id="blue" src="blue.png" alt="Irritating" /><br /> 

<img id="yellow" src="yellow.png" alt="Frazzled" /><br /> 

— <img id="orange" src="orange.png" alt="Panicked"^ 7 >^br /> 。㈡ . 

<img id="red" src= n red.png" alt="Maddening" /> \S -fourth 

</body> H Clcmch-t ih the 

a\r\ray, whidh has 
_ mdex o( Z. 

Using getElementByld () : 

Using getElementsByTagName () : . 七 f. ， ? 味於详 !? 


fretting iw touch with your iwwcr HTML 

OK, the real point of all this HTML element access business is getting 
to the content stored in an element. You can access HTML elements 
that are capable of holding text content, such as div and p, by using a 
property called inner HTML. 


Tke innerHTML 

property provides access 
to all ol tke content 
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wrangling the page 



It seems as if you should be able to set 
the content of an HTML element as easily 
as you can get it. Is that possible? 


innerHTML can also be used to set 
content on the page. 

The innerHTML property is actually used for 
setting HTML content just as much as it is for 
getting it. The content of an element can be 
set to a string of HTML text just by assigning 
the string of text to the element’s innerHTML 
property. The new content replaces any content 
that previously belonged to the element. 



document.getElementByld("story").innerHTML 
"You are <strong>not</strong> alone!"; 


IS sc-t, O^r m *tK»s 

cast reflated, ^ ass — 吒 a 
lymcrttTML 





— your pencil 


Assuming the scene description message is already being 
correctly set based upon decisions made by the user, write the 
line of code that sets the message text to the scene description 
element on the Stick Figure Adventure page using innerHTML. 
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sharpen solution 


(^Jharpen your pencil 

Solution 


TKc IP 

stttit message <dw> 
•»s w stc^cTc%f- 


Assuming the scene description message is already being 
correctly set based upon decisions made by the user, write the 
line of code that sets the message text to the scene description 
element on the Stick Figure Adventure page using innerHTML. 


do 乙伙 tByld.nrme\rttTML 二 message ； 


Aw adventure with less iwterruptiows 

The dynamically changing scene description area gives Stick Figure 
Adventure a smoother and more enjoyable user experience with no 
pesky alerts. 

^ Slick Figure Adventure 

Wow, that's a subtle change, 
but I love it. 


a 


v 


o 


0 










The sdChC dcsdv-iptioh 

how -Pits ih-to the 
-Plow o( the pa^e. 


V 

You arc st^dirifi on the bnd^c overtook a pcacd^l 咖狐 

Ffcasc chcww：」J」J 


ler man aaamg me <aiv> tor me scene description (^messagej area 
and the code to set the innerHTML property, the only other changes to 
the Stick Figure Adventure code involve adding a message variable, and 
then setting it in each different scene... 
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如逢 娜 Adventure 
CaJe Up Cl^se 


<html> 

<head> 

<title>Stick Figure Adventure</title> 

<script type= M text/javascript M > 

// Initialize the current scene to Scene 0 (Intro) 
var curScene = 0; 


function changeScene(decision) { 
// Clear the scene message 
var message = MM ; - - 


丁 he message \ ocb \ variable 
is dv-catcd "fco s-fcovc the 
dcs^vip-tioh messoi^e 
-Po\r the hCW SdChC- 


switch (curScene) { 
case 0: 

curScene = 1; 

message = "Your journey begins at a fork in the road 
break; 
case 1 : 

if (decision == 1) { 

curScene = 2 

message = "You have arrived at a cute little house in the woods 


TV^c message variable is 
sc*b *to dcsd\ript»oir\ 七 e % 七 
unique *to sd ⑼ e. 



else { 

curScene 
message ； 

} 

break; 



3; 

'You are standing on the bridge overlooking a peaceful stream 


// Update the scene image 

document.getElementByld( M sceneimg") .sre 


scene' 


curScene 


png' 


// Update the scene description text 
document.getElementByld( M scenetext") .innerHTML 


message, 


</script> 
</head> 



T"he sdChC dcsdv-iptioh 

text is set "to the 

doh-tch-ts usih0 

七 he ihhC\rflT^/lL- pvopev'^y. 


<body> 

<div style= M margin-top : lOOpx; text-align : center M > 

<img id= M sceneimg" src= M scene0.png" alt= M Stick Figure Adventure" / ><br / > 
<div id= M scenetext M ></divxbr / > 

Please choose : 

<input type= M button M id= M decisionl M value= M 1 M onclick= M changeScene(1) M / > 
<input type= M button M id= M decision2 M value= M 2 M onclick= M changeScene(2) M / > 
</div> 

</body> 

</html> 
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ask away 



Dumb Questi 


9ns 


Can I use getElementByld () 

to access any element on a page? 


Can inner HTML be used to set 
the content of any HTML element? 


When you set the content of an 
element with innerHTML what 


Yes, but only if the element has its 
id attribute set to a unique value. The id 
attribute is absolutely essential to using the 

getElementByld () method. 


No. In order to set the “inner HTML" 
content of an element, the element must 
be capable of containing HTML content. So 
in reality, innerHTML. is for setting the 
content of elements like div, span, p, and 
other elements that act as content containers. 


happens to the content? 

The innerHTML property always 
completely overwrites any prior content 
when you set it. So there is no concept 
of appending content to innerHTML, 
although you can get the effect of appending 
content by concatenating the new content 
onto the old content, and then assigning 
the result to innerHTML, like this: 
elem. innerHTML += ’▼ This 
sentence gets appended. 


Not so fast. I heard innerHTML isn't 
even a Web standard. Is that true? 


0 



Well, yes, but are web standards really anything to 
worry about? 

It’s true, innerHTML was originally created by Microsoft as a proprietary 
feature for the Internet Explorer browser. Since then, other browsers have 
adopted innerHTML, and it has become an unofficial standard for 
quickly and easily changing the content of web page elements. 

But the fact remains that innerHTML isn’t standard. That may not seem 
like a big deal but the idea behind standards is to make web pages and 
applications work on as many browsers and platforms as possible. Besides, 
there is a standards-compliant way of accomplishing the same task that 
is ultimately more flexible and more powerful, even if it isn’t quite as 
simple. This approach involves the DOM, or Document Object Model, 
a collection of objects that provide JavaScript with complete and total 
control over the structure and content of web pages. 
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Seeing the forest and the trees: the Pocumewt 
Object Model (POM) 


The DOM offers a script-friendly view into the structure and content of a web page, 
which is important if you’d like to use JavaScript to dynamically alter a page. Through 
the lens of the DOM, a page looks like a hierarchy of elements in the shape of a tree. 
Each leaf on the tree is a node, which directly relates to each element on a page. When 
a node appears beneath another node on the tree, it is considered a child of that node. 


W, W 七七 he “CS br a 
Ao vcscwblc a 七 



Tke DOM ” sees” 


a wet page as a 
kierarcliical tree 
ol nodes. 


TVic y/Wrtcspate surrou^dm^ 
<p> ,s 


The s-tirohg text W alohC W 
a Ppca\rs beneath a hode 

*Po\r the <st\TOhg> tag. 
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classifying tree nodes 


Your page is a collection of POM nodes 

Every node in a DOM tree is classified according to its type. The main 
node types correspond to structural parts of a page, primarily consisting of 
element nodes and text nodes. 


document 


ELEMENT 


DOM nodes 

are classifiect 
accorctingf to 
tkeir node types. 


The top node in a DOM tree, 

representing the document itself and 

appearingjust above the html element. 

TEXT 

The text content for an element, 
always stored as a child node 
beneath an element. 


Any HTML element that corresponds 
to a tag in HTML code. 

attribute 

An attribute of an element, accessible 
through an element node, but not 
present directly in the DOM tree. 


DOCUMENT 


Applying node types to the DOM tree for a web page helps to clarify 
exactly how each piece of a page is perceived by the DOM. Of particular 
interest is how the TEXT nodes always appear immediately beneath an 
ELEMENT node as part (or all) of the node’s content. 


ELEMENT 


<html> 


<head></head> 


<body> 

d="s tor' 


a*t*tv-*ikiA*tcs av-c attcss>klc 
usm^ -tVic VOM a^d 七 o 補 
y\oAc do v\oi appear m 

v\odt \xtt +ov- a pay- ■ 

YOU Standing < S tron g >alone</3tron g > in the WQods 

</p> 

</body> 

</html> 



ELEMENT 


TEXT 




ELEMENT 


ELEMENT 


ELEMENT 



七 iVis iicad element 
is 七 are -typ^allY 

(M\\d r\odcs 七 h 七 k 
liedd r\odc m most pays. 
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Complete the DOM tree representation of the Stick Figure 
Adventure HTML code by writing in the name of each 
node. Also annotate the type of each node. 


</head> 

<body> 

<diV 吻 1 * ” 職咖 - top:100px; text-align ： centers 

id= " SCenei ^" src=-'scene0.png- alt="Stick F' 

.. y t Stick Figure Adventure" />< br /> 

<div id="scenetext"></div><br /> 

Please choose : 

<_ut type=-'button- id="decisionl- value=-'l- n „ 

• nc lc k—"changeScene(1)” /> 

〈input ty P e=” button ” id =-decision9- i 

° n2 ValUe= " 2 " °nclic k =..chan ge scene(2).. /> 
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sharpen solution 


Jiarpen your pencil 
l Solution 


Complete the DOM tree representation of the Stick Figure 
Adventure HTML code by writing in the name of each 
node. Also annotate the type of each node. 


</head> 


<body> 


3t y ie =.. margin _ top;100px； text _ align；centerii> 

id= " SCenei ^" src="scene0.png- alt="Stick F' 

. y L Stlck Figure Adventure" />< br /> 

<div id=»scenetext"></div><br /> 

Please choose: 

type="button" id="decisionl" value^-'l- on , • , „ 

c lck ~ changeScene ( 1 ) " /> 

tYPe= " bUtton " id="decision 2 " value=" 2 " on t „ 

</div> > ^^ s V. C 1Ck ~ changeScene (2)" 

</body> 

</html> 


^'rtcspatc bc-fovc 扣 d 

a-f*tcv- ay\ clcmcrrt touy\*b as 






UU 


Jhyj 


“Please loo 

ELE/WENT element 


t>OCUA/iBMT 


Document 


euEMtKT 


1 html 



\ 


body 


head 


di 

V 





ELE/WENT ! 


UU 

■ 
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wrangling the page 


Climbmg the POM tree with properties 


Most interactions with the DOM begin with the document object, 
which is the topmost node in a document’s node tree. The document 
object offers useful methods like getElementByld () and 
getElementsByTagName (), and quite a few properties too. Many of 
the properties of the document object are available from every node 
in a tree. Some of these objects even allow you to navigate to other nodes. 
This means node properties can be used to navigate through the node tree. 


nodeValue 

The value stored in a node, 
only for text and attribute 
nodes (not elements). 


nodeType 

The type of a node, such 
as DOCUMENT or TEXT, 
but expressed as a number. 


Vocte properties are 
kancty ior traversing 
tkrouglt nodes in tke 

DOM tree. 


childNodes 

Arrays containing all of the child nodes 
beneath a node, in the order that the 
nodes appear in the HTML code. 


firstChild 

The first child node 
beneath a node. 


lastChild 

The last child node 
beneath a node. 


These properties are key to being able to manuver through the document tree 
to access specific node data. For example, you can use node properties with the 
getElementByld () node access method to quickly isolate a specific node. 


alert(document.getElementByld("scenetext").nodeValue); 



The nodeValue pvopcirtv addesses -the 


七 ext 乙 。灼七 e 灼七 


: pv-opc\rty 
s-fcov-cd m 


a m>de. 


OK, so maybe that’s not the best example, seeing as how the scene 
description text div starts out empty in Stick Figure Adventure. But 
it should eventually get set to some very compelling text as the story 
progresses, in which case this code would look much smarter. 


The K>odc\/aluc pvopev-ty always 
^Oh-taihS pu\rc itYi wi-th ho 
additional -Pov-rwa-ttmg. 

T\\t sCcr\C description 
•m Fiju\rc AdvertWc 
mitially s-bavts ou-b 







The following code is referencing a node in the tree on page 356. Carefully study the code and 
then circle which node it references. 


document. getElementsByTagName ("body") [0] . childNodes [1] . lastChild 


you are here ► 


357 










exercise solution 


^E%ettciSe 


The following code is referencing a node in the tree on page 356. Carefully study the code and 
then circle which node it references. 



document. getElementsByTagName ("body") [0] . childNodes [1] . lastChild 


Tiicv-c is or\ly ont <body> so i*t 
Kas *to be 3s 

element m avvay vctuv^cd by 


Document 






html 





"HiC sc^ohd Child y\odt o-p "the 
body clcr^Cht is the div dcrwCht 




T\\t last 乙 Wild 
o-f *tV^C w\a'm 
div clcmcir\*t 
is dr\ 

clcw'C^t 




div 

1 







head 


1 


Please tlioosc ： ' 







Tiic ^c*t&c^cr\*UByldO 
method ^c*b a si^lc element 
is sc*t *to a spcdi-f 'it IP- 


theretare no ^ 

Dumb Questi 9 ns 


What’s the difference between getElementByld () 
and getElementsByTagName () in the DOM tree? Why 
would I choose one over the other? 

The two methods offer different approaches that basically have 
to do with whether or not your goal is to isolate a single element or a 
group of similar elements. To isolate a single element, you can’t beat 
getElementByld () —just hang an ID on the element and 
you're good to go. 


The gc-tElcmch-bByTag/VamcO method 
dll o-P "the dcrwCh*ts o-p 3 dev-tclih 
tag Mrwe throughout the page, 
like <ihput>, -Pov example. 


example, if you wanted to hide all of the images on a page using 
JavaScript, you would first call getElementsByTagName () 
and pass it " img" to get all of the image nodes on the 
page. Then you would change the visibility CSS style 
property on each of the image elements to hide them. Oops, 
we’re getting way ahead of ourselves... we get back to the DOM 
and CSS later in the chapter. For now, just understand that 
while getElementsByTagName () isn’t as popular as 
getElementByld (), it still has its place in special situations. 


But if you want to target a group of nodes, 
getElementByTagName () is a much better option. For 
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wrangling the page 



DOM properties allow you to change web page 
content and maintain web standards compliance. 

Since the DOM views everything in a web page document as a 
node, changing a page involves changing its nodes. In the case of 
text content, the text for an element like div, span, or p always 
appears as a child node or nodes, immediately beneath the element 
(node) in the tree. If the text is contained in a single text node with 
no additional HTML elements, then the node is located in the first 
child. Like this: 


document.getElementByld("story").firstChild.nodeValue 



<p id=’’story"> 

You are not alone 

</p> 








How would you change the text for 
a node using the DOM? 
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problem children 


Changing node text with the POM 

If you could safely assume that a node only has one child that holds its text content, 
then it’s possible to simply assign new text content to the child using its node Value 
property. This approach works just fine, again, but only if there’s a single child node. 


document•getElementByld( n story").firstChild.nodeValue = n OK, maybe you are alone."; 



<p id="story"> 

You are <strong>not</strong> alone 
</p> 

This pamayaph 
bv-caks do^iv\ m-to 

multiple 匕 hild hodes. 


TEXT 

I_ 

"You 

are" 





r 

Chahg.hg -the 匕 oirteht m the -fivst 
Aild ish't Chough -to 乙 hahge the 
Chtnrc 匕 ohteivt cvf the pavagvaph. 

If we replace only the first child, the remaining child nodes are still there, 
and we’ll get some strange results like these: 



ELEMENT 


ELEMENT 


str 

ong 


I 


J 

TEXT 


’ ’not ’ 1 ■ 





S'mtc -tKcv-c is a 
m i\\t paragraph 
*tKcv-c av-c 

multiple nodes. 


document•getElementByld( n story")•firstChild•nodeValue = n OK, maybe you are alone."; 


the -Piv-s-t dhild is Yt^Ctd, 
whiA still leaves the 
匕 Oh 七 Ch 七 … sorwc ^Oh^Pusih^ V*csul"ts. 


(QK^maybe you are alon^otalone, 
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wrangling the page 


Three (safe) steps for changing node text 


The problem with changing the content of a node by only changing the 
first child is that it doesn’t factor in the prospects of other child nodes. So 
to change the content of a node, we really should clear all of its children, 
and then add a new child that contains the new content. 


o 

❺ 

❺ 


Remove all child nodes. 

Create a new text node based upon the new content. 
Append the newly created text node as a child node. 


We can do this with three DOM methods: 



removeChild() — 

Remove a child node from a node; 
in the child node to be removed. 




o createTextNode() 

Create a text node from a string of text. 

❺ appendChild() 

Add a node as the last child of the node; 
pass in the child node to be added. 



To change the text content in the “you are not alone’’ example, 
we have to work through these three steps, first making sure to 
remove all of the child nodes, then creating a new text node, 
and finally appending the text node to the paragraph. 


pivs 七 JV-ab *tv^c 
(y\odc) us'm^ *i*bs IP- 


var node = document • getElementByld ( "story ▼，）； 


while (node.firstChild) 


o 


node.removeChild(node.firstChild); 


Remove the -Pi\rst dhila hode Uh-til 

a\rc v\o rwo\rc 乙 hild hodes. 


node.appendChild(document.createTextNode("OK, maybe you are alone ."))； 


❺ 


A-Ptcv- v-cruovihg dll the 
Aild hodcs, append the 
text hodc -to the 
pav-Cht hodc- 


❺ \ 


Cv-catc a ⑽ de. 



you are here 













DOM exposed 



©OM BuiyWg Blocks 

This week’s interview: 

Node discusses the wisdom of 
DOM trees 


Head First： I’m told you’re the smallest unit of storage 
in a DOM tree, kind of like an atom for HTML content. 
Is that true? 

Node： I’m not sure how atomic I am but yes, I do 
represent a discrete piece of information in a DOM tree. 
Think of the DOM as breaking down every web page 
into tiny bite-sized pieces of information... and I’m that 
bite-sized portion! 

Head First： Why does that matter? I mean, is it really 
that important to be able to break down a web page into 
little chunks of data? 

Node： It’s only important if you care about accessing or 
altering the information in a web page. Many scripts care 
about this very thing, in which case the DOM matters 
quite a lot. But the real reason it matters is because it is 
quite empowering to be able to disassemble a web page 
into all of its little pieces and parts. 

Head Rrst: Don’t you run the risk of losing a part when 
taking apart a page? Far too many people take something 
apart only to have pieces left over, and next thing you 
know they’ve broken the thing. 

Node： No, that’s not a problem with the DOM because 
you don’t have to literally take anything apart to access a 
web page as a tree of nodes. The DOM provides the tree 
view regardless of whether you actually plan on doing any 
shaping or pruning to the web data. 

Head First： That’s a relief. But if I really do want to 
do some web page pruning, is that where you enter the 
picture? 

Node： Yes. Except that you aren’t limited to pruning — 
you’re free to add to the tree of web data as well. 

Head First： Wow, that’s pretty amazing. How does that 
work? 

Node： Well, remember that every piece of information 


on a page is modeled in the tree as a node. So you can go 
through me to access anything within a page. Or you can 
create entirely new pieces of web data using me, and then 
add them to the tree. The DOM is really quite flexible. 

Head First: That’s neat. One thing that still confuses 
me, however, is how you relate to elements. Are you guys 
really the same person? 

Node： Yes, actually we are. But I do take things a step 
further. Remember that an element is just another way 
of looking at a tag, such as <div> or <span>. Every 
element on a page is represented by a node in the 
document tree, so in that sense element and I are the 
same. However, I also represent content stored within 
an element. So the text stored in a <div> is also its own 
node, stored just beneath the div node in the tree. 

Head First： That sounds kin da confusing. How can you 
tell the difference between elements and their content? 

Node： Well, first of all, the content stored within an 
element, or node, always appears as a child of the node in 
the DOM tree. And second, all nodes are distinguishable 
by type: an element node has the ELEMENT node type, 
while its text content has the TEXT node type. 

Head First: So if I want to access the text content of an 
element, do I just look for the TEXT node type? 

Node： You could; just keep in mind that the nodeType 
property actually returns a number for each node type. 

For example, the TEXT node type is 3, while ELEMENT is 
1. But even that’s not really necessary because all you have 
to do is look to the children of an element node in order 
to access its content. 

Head First： I see. Well thanks for your time, and for 
illuminating the wonders of the DOM tree. 

Node: You’re very welcome. And if you’re ever in the 
mood for some tree surgery, don’t forget to look me up! 
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thereiare no o 

Dumb Questi9ns 


TV^c f clcwcv\*t 
V\ds iWrec 
dWild ^odcs. 


pElcrh.^liild/VodcsCZJ 



The while loop test looks like this: 

while(node.firstChild) 



"alone." 


pElc^.dhila/VodcsCOJ 


W sbroY\^ 
clcwcv\*b 
ov\e 6W«ld v^dc. 


Q/ I’m still a little confused about child 
nodes and how they are organized. For 
example, how does the childNodes 
property work? 

When a node contains data within 
it, the node is considered a parent node 
and the data within it is perceived by the 
DOM as child nodes. If the data consists of 
anything more than raw text data, then it is 
broken apart into multiple child nodes. The 
child nodes beneath a parent node appear 
in the parent’s childNodes property 
as an array, and their order in the array 
matches the order that they appear in the 
HTML code itself. So the first child node in 
the childNodes array can be accessed 
using childNodes [ 0 ]. The array can 


also be looped through to access each of the 
child nodes. 

In the code that removes all of the 
child nodes from a node, how does the 
while loop test condition work? 


What this test is doing is checking to see if the 
node still contains a first child node. If there is 
still a first child node, its presence results in a 
value of true in the context of the while 
loop, and the loop continues for another 
iteration. If there is no first child node, that 
means there are no children at all. And if that’s 
the case, the code node . f irstChild 
results in null, which automatically gets 
converted to false in the context of the 
while loop. So what’s really going in is 
that the while loop is looking to see if the 
first child node is null, which is conclusive 
evidence that there aren't any other child nodes 
lurking around. 



JavaScript Magnets 


The DOM-compliant version of Stick Figure Adventure is missing several pieces of 
important code. Use the magnets below to finish up the code that changes the node text 
for the scene text element. Magnets can be used more than once. 

















JavaScript magnets solution 



JavaScript Magnets Solution 


The DOM-compliant version of Stick Figure Adventure is missing several pieces of 
important code. Use the magnets below to finish up the code that changes the 
node text for the scene text element. Magnets can be used more than once. 


M loi^j as 七 he 

v\odt has dhild 
nodes, keep loofmj. 


Tiic loop y/'ill dorrtmue 
3s lor\^ ds 3 t\\\\A c%is*ts. 


Pivsi y*ab -the 

us*mj i-ts |p. 


The message must 
be puve 七以七 v/i-th 
y\o -rov-ma'ttmg ov- 

WTML tags. 


// Update the scene description text 


var 


sceneText 




document • getElement^Yld ( M 


while 




sceneText 
sceneText 


firstChild 


)； 



appendChild ( 

1 


message 


Keep \rcmovihg the 士 Vst 
^Kild o4 - the stcv\c text hode uhtil 
thc\rc a\rc ho dhild\rCh Ic-f-fc. 



|s/oy/ *biia*b -biicv-c av-c y\o tii'ildvc^ 
3fpcir\di^5 V\CV/ "tc % 七 node 

SCV^VCS dS d Complete 州⑼ 七. 


W\{\) all c^P -tlic dhild hodes 


v-erwoved) d hew t\odc is 
Seated artdi added as a Md 
o( ihc sdchc hode- 


BULLET POINTS - 

■ Although not a web standard, the innerHTML 
property provides access to all of the content stored in 
an element. 

■ The Document Object Model, or DOM, provides a 
standardized mechanism of accessing and modifying 
web page data. 


■ The DOM looks at a web page like a hierarchical tree of 
related nodes. 

■ The DOM alternative to changing web page content with 
innerHTML involves removing all of the child nodes 
of an element, and then creating and appending a new 
child node that contains the new content. 
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Standards compliant advewturiwg 


Boy, that sounds fun! The mark of any good adventure is standards 
compliance... or not. But it can be a good thing in the context of modern 
web apps. And more importantly, take a look at the dramatic changes the 
DOM approach to altering the scene description text have brought to 
Stick Figure Adventure... 



Tke DOM is a weL 


Hmm. OK, so maybe the page doesn’t look any different, but behind 
the scenes it adheres to the latest web standards thanks to its usage 
of the DOM. Not everything in JavaScript code can be appreciated 
visually, and in this case our satisfaction with the DOM-powered 
version of Stick Figure Adventure will have to come from within. 


stanctarct way ol 

manipulating HTML tkat 

allows more control titan 

using tke innerUTML 


property, 


you are here ► 


365 




improving your options 


Iw search of better options 

So now the dynamic scene description text has now been overhauled twice, 
but those cryptic option buttons still remain in Stick Figure Adventure. 
Surely something could be done to make the story navigation a little more 
engaging and intuitive than choosing between the numbers 1 and 2! 


Please choaK .： 1 

之 1 

L 




I know they get the job done 
but the option buttons really are 
underwhelming. They should be 
much more descriptive. 


TiiC r\umcvi£. option bu*t*tor\S just 

aver / 七~七七1吒 I 七一 ⑽七“ ! 

about dc^isior\ use\r. 


A decent improvement to the option buttons would be to change them 
so that they actually reflect the available decisions. They could include 
text on the buttons that spell out exactly what the two options are at 
each point like this: 


0 




Walk across Bridge 

Gaz( tmo SirtMn 



MW kctw! Kovi avc 

? Iaym5 vole Atc：^. 


Gome to think of it, there really isn’t any reason we have to use form 
buttons for this — any HTML element that can contain text could 
feasibly work. CSS styles could be used to dress them up and make 
them look more like input controls. 





How would you implement data-driven options in Stick Figure Adventure 
so that they display option text specific to each different scene? 
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designing better, cleaner options 

Since the new and improved decision-making options in Stick Figure 
Adventure are HTML elements that contain text, the DOM can be 
used to dynamically alter the decision text in each scene. This means 
each scene will set its decision text along with its description. And it 
also means the changeScene () function needs two new variables to 
store this decision text, decisionl and decision2. 

Here’s how we could go about setting Scene 1 decision text as it 
transitions to Scene 3 in the changeScene () function: 



curScene 


3 ; 


message = 
decisionl 
decision2 


'You are standing on the bridge overlooking a peaceful stream 


'Walk across Bridge 
'Gaze into Stream 



TKc dtc\s\oY\\ and 
variables art used -to stove 
sUY\t dtt\i\oY\ -fov- 



rpen your pencil 


Dynamic options in Stick Figure Adventure require a new approach to 
how the options are represented in HTML code. Write code for the new 
text elements that replace the existing 〈 input 〉 buttons. 

Hint:The CSS style class for the new elements is named "decision", 
and the content of the first element is initially set to "Start Game". 
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sharpen solution 


(^Jterpen your pencil 

Solution 


Dynamic options in Stick Figure Adventure require a new approach to 
how the options are represented in HTML code. Write code for the new 
text elements that replace the existing 〈 input 〉 buttons. 

Hint:The CSS style class for the new elements is named ’ ▼decision”, 
and the content of the first element is initially set to "Start Game". 


Please dsaosei L 」 2： | 


: ld ： "decision2-' value ： ''2-' /> 




Rcv/r'i-tc i\\t Codt -for 
options … 

七 y/o buttons 

spa 於 clcmc^^U- 


dass=y ； dctiii^ 外扣印 〆 女.尜 

******* ■•擧•審* ■•鲁•■舉 •••••• ••籲 #* 參* 


Replacing node text sounds 
like a task that would be 
handy to have in a function. 


Rethinking node text replacement 

All that’s missing now in Stick Figure Adventure for the new dynamic 
decision text is the code that actually sets the text for the new span 
elements. This code is ultimately doing the exact same thing as the DOM 
code we wrote earlier in the chapter that dynamically changes the scene 
description text. In fact, this presents a problem because we now need 
to carry out the exact same task on three different elements: the scene 
description and the two scene decisions... 
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Replacing node text with a fuwctiow 

An all-purpose node text replacement function is a handy thing, and not 
just in Stick Figure Adventure. This type of function operates much like 
the scene description text replacement code we worked through earlier, 
except this time the code goes to work on function arguments. 

_ - ^ "the hodc whose 

乙 ohtehi is ■(» be vcylaud. 

function replaceNodeText(id, newText) { 

T\\t r\cv/ toyrte ” 七 

} *bo ^>ld^e m node. 


The custom replaceNodeText () function accepts two arguments: the 
ID of the node whose content is to be replaced and the new text to place in 
the node. Use this function to change the text content of any element on a 
page that can hold text. In Stick Figure Adventure, the function allows you 
to now dynamically change the scene description text and the text for the 
two decisions at one time..but of course you need to write it first. 


|r\s*tcad o-f dupli 匕 at” 
same Code 

times, 七 he is 

己 ailed tiiv-cc times. 



replaceNodeText("scenetext ", 
replaceNodeText("decisionl ", 
replaceNodeText( n decision2 ", 


message); 
decisionl); 


decision2); 



Reflate i\\t 

dcstv-'iftion it%i 

a w»cssay. 


Chahgc the de 匕 isioh 
-fov each of 
"the two de^isiohs. 



Write the code for the replaceNodeText () function, the all-purpose 
function for replacing the text within a node that is referenced by ID. 


Don’t forget that the function accepts two arguments, id and newText. 
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(^Jterpen your pencil 

Solution 


今 e 七 *t^c clcw'Cy\*t 

us'm^ its u—ue IP. 


Write the code for the replaceNodeText () function, the all-purpose 
function for replacing the text within a node that is referenced by ID. 

Don’t forget that the function accepts two arguments, id and newText. 


4 va\r r\oAt — 

while ^odc -fi\rs*tCiiild) 


^hildlrch -fvom 
the hode. 



dcv-cmovcChildlf 灼 ode *f i\rs*tChi I d); 


dWild 七 wt 

灼七 us'm^ 七 he ⑽ dc.app ⑶ dCiVild(dodumwt.d\rca*(^Ti 火 tNode (灼 cv/7i 丈 t)); 

passed m*to 

{\\t 七 lew. _ • 

The dvca*tc7c%*tN odt () -Pu^d-tio^ is o^ly 
available m -the dodumc^*t objedt ar>d 
has y\o divcd*t he *to a fav-ti^ulav r>odc- 



Pynamic options area good thing 


The new dynamic text decisions in Stick Figure Adventure are much more 
intuitive than their cryptic button counterparts. 



isiohs let the 
uws how exactly what theiv- options 
at cadh poih*t ih "the s-fcov-y. 
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Why are span elements used for 
the Stick Figure Adventure decisions, as 
opposed to div elements? 

Because the decision elements need 
to appear side by side, which means they 
can’t be block elements that start on a new 
line. A div is a block element, whereas a 
span is inline. Inline is what we want for 
the decisions, so span is the ticket. 



When I create a new node with 

createTextNode (), where does 
the node go? 

Nowhere. When a new text node 
is first created, it’s in limbo, at least with 
respect to the DOM tree for a given page. 
It’s not until you append the node as a child 
of another node that it actually gets added 
to the tree, which then adds it to the page. 


Does the content of a text node 
created with createTextNode () 

have to be just text? 

Yes. The DOM doesn't work like 
innerHTML, where you can assign 
text that has tags mixed in with it. When 
the DOM talks about a “text node," it really 
means pure text with no other tags or 
formatting tacked on. 


Interactive options are even better 


So the dynamic text decisions in Stick Figure Adventure are an 
improvement over their cryptic predecessors, but they could still be 




I thought highlighting and fancy 
visual effects are associated 
with CSS, not the DOM. 


Highlighting is associated with CSS but the 
DOM is still directly involved. 

Highlighting web page content is in fact a CSS issue because 
it involves tweaking the background color of an element. But 
the DOM also factors into the highlighting equation because it 
provides programmatic access to the CSS styles of elements... 
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classy DOM styles 


A matter of style: CSS and POM 

CSS styles are tied to HTML elements, and the DOM provides access to 
styles through elements (nodes). By using the DOM to tweak CSS styles, 
it’s possible to dynamically manipulate the content presentation. One way 
that CSS styles are exposed through the DOM is in an element’s style 
class, which is where a group (class) of styles is applied to an element. 

<span id= M decisionl" class 二 '’decision" onclick= M changeScene(1)">Start Game</span> 
<span id= M decision2" class= M decision" onclick= M changeScene(2)"></span> 


〈style type="text/css"> 
span.decision { 

font-weight : bold; 

border : thin solid ^000000 

padding : 5px; 

background-color : #DDDDDD; 


TVic de6s»cm sbj\t dass is 
y/Via*t 5'WCS dctlSlOir\S 

visual appeal 


</style> 


The DOM provides access to an element’s style class through the 
className property of the node object. 

alert(document.getElementByld("decisionl").className) 

nc className 
provides access bo ^ 



Tke className property of a node 
provides access to tke style class. 




Start Game 


1 





Try not to 
get CSS 
style 
classes 
confused 
with JavaScript 
classes. 


Watck it! 


CSS style classes and 
JavaScript classes are very 
different animals. A CSS 
style class is a collection of 
styles that can be applied 
to an element on the page, 
while a JavaScript class 
is a template for creating 
JavaScript objects. We 
uncover the details of 
JavaScript classes and 
objects in Chapter 10. 
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Swapping style classes 

To change the appearance of an element using a completely different style 
class, just change its style class name to a different CSS style class. 


TKc dctisionmvcvsc 



style t\ass vcvcvscs 
i\\t 匕 olov sdiicr^c <^f 
dedisio 灼七 wt. 


document•getElementByld( n decisionl n ).className = "decisioninverse"; 


Same dc^isioh dcrwCh-t ； 
d\UtYCY\i style classes/ 



/Uev ； style c\ass \s allied *to 
dtc\s\ov\ 必叫 dassKa^c. 


Changing the style class of an element using the className 
property immediately changes the appearance of the element to the 
new style class. This technique can be used to make dramatic visual 
changes to elements on a page with relatively little coding effort. 




your pencil 


Using the two mouse events onmouseover and onmouseout, add 
code to the <span> decision elements in Stick Figure Adventure so 
that they change style classes for a mouse hover highlight effect. 

Hint: The "hover” style class is named decisionhover . 


<span id="decisionl" class= M decision" onclick="changeScene(1)" 


>Start Game</span> 


<span id="decision2" class= M decision" onclick="changeScene(2) 


></span> 
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sharpen solution 


(^Jterpen your pencil 

Solution 


TKc dct'is'io^ovcv- sb/\t tlass is sti m 

vcspoy\sc *bo *t^c o,ouseovev even 七 . 


Using the two mouse events onmouseover and onmouseout, add 
code to the <span> decision elements in Stick Figure Adventure so that 
they change style classes for a mouse hover highlight effect. 

Hint: The "hover”style class is named decisionhover . 



<span id= M decisionl" class= M decision" onclick="changeScene(1) 

o^mouscovc\r— W *this.dlass|N/amc — 'dlcdisio^hovc\r ，W 



TWis cvcr\*t 
is *tv>55cv"cd 
*tV^c mouse 
po"m*tcv~ w\ovcs 
ovcv- span 
clement 

/ \ uhKighlijh-tcd de^isioh 

: 七 yje is mesWcd ih mcspohsc 
to the ohrhouscou-t cvcht 


o^mouscou*t— W *this.dlassKamc — 'dcdisio^^ >Start Game</span> 

<span id= M decision2" class = M decision" onclick="changeScene(2)" 

0^inf\OUSCOVC\r= lW *this.dlassK3w'C — 'dlcdisioir\ilOVCV- ，W 

oirm\ouseou 七二 ” *tiVis.ddss|N/ame 二 'dc^isio^^ 〉</ span 〉 

TWis cvc^*t is irmtrtd v/b the w'ousc 
•• 士 r moves ckk ^ *t^c ^ clcrn ⑶七 . 



Classy options 


Applying style classes to the Stick Figure Adventure 
code yields two different appearances for the 
decision elements: normal and highlighted. 


〈style type= !l text/css n > 
span.decision { 

font-weight:bold; 

border : thin solid #000000i 

padding:5px; 

background-color : #DDDDDD; 


thereicire no o 

Dumb Questions 




Can’t I just use CSS to create buttons that highlight 
when the mouse moves over them? 

Yes. And in many cases that is a better way to create “hover” 
buttons because CSS is more widely supported than JavaScript in 
browsers, such as on some mobile devices. However, Stick Figure 
Adventure is a JavaScript application, and does all kinds of things 
that are impossible to do in CSS alone. So in this case it’s not a 
liability in any way to use JavaScript for the scene decision buttons. 


TVic only 

*Uo style classes is 
katkyoiA^d tolov-. 


</style> 


<style type= n text/css，，> 
span•decisionhover { 
font-weight : bold; 
border:thin solid #000000; 
padding : 5px; 

</style> 


Normal 
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Test drive the stylized adventure options 

The user interface for Stick Figure Adventure is now improved thanks to 
the DOM’s ability to change an element’s style class on demand. Ellie is 
feeling pret^^oo^abou^ie^cnDt 


Wow, the new 
mouse hover 
highlighting 
effect rocks! 



C dc ^ ,s, ° h how 

whch -the mouse 
P oi 士 1 r hovels ovcv- thcry,. 


D 


thereiare 

)umo ( 



esti9ns 


(^•1 don’t remember the 

onmouseover and onmouseout 

events. Are those standard events? 

Yes. In fact, there are lots of standard 
JavaScript events that we haven't explored. 
But the thing about events is how you 
can react to them even when you don’t 
necessarily know everything about them. 

In the case of the two mouse events, their 
names are really all you needed to know to 
understand that one of them is fired when 
the mouse pointer hovers over an element, 
and the other one fires when the mouse 
pointer moves out of an element. 


Why wasn’t it necessary to use 
getElementByld () in the code 
that sets the style class of the decision 
elements? 

Every element in JavaScript is an 
object, and in the HTML code for an element 
we have access to that object through the 
this keyword. So in the Stick Figure 
Adventure code, the this keyword 
references the node object for the span 
element. And that’s the same object with the 
className property that accesses its 
style class. So changing the style class only 
involves setting this . className. 


Style classes are cool but I’d really 
like to just change one style property. Is 
that possible? 

Wow, what intuition! There’s a nagging 
problem with Stick Figure Adventure that 
Ellie has been eager to resolve. And it just 
so happens to involve using JavaScript and 
the DOM to manipulate style properties 
individually... 
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where the buttons have no name 


Options gone wrowg: the empty button 


It’s been there all along, and up until this point Ellie coped with it. But 
it’s time to go ahead and address the weirdness associated with the empty 
decisions in Stick Figure Adventure. In some scenes there is only one 
viable decision yet both decision elements are still displayed, like the 
screenshot here. It’s a little unsettling for the user to see an interactive 
decision element with no information in it. 




Stick Figure Adventure 


TVs been bugging me that some 
of the scenes have empty options. 
An empty option doesn’t make much 
sense and can only cause confusion. 


WelcoKe to 

STICK FIGURE 

apvewture 


Jl 


f 


Click either 
“N 七 o 
杜 art 

The empty de 匕 isio 灼 

_ / elemeivt is both 

一 j[j 夸 / si\ra^gc dhd doh-Pusi 


lil 




吒 . 


Dwpc 



Which other scenes have the empty option 
problem? What options exist to fix this? 
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A la carte style tweaking 

Sometimes changing the entire style class of an element is just too much. 
For times when a little more granularity is required, there is the style 
object. The style object is accessible as a property of a node object, and 
provides access to individual styles as properties. The visibility style 
property can be used to show and hide elements. In the HTML for Stick 
Figure Adventure, the second decision element can be initially hidden 
using the following code: 


Tke style property 
oi a node provides 
access to inctivictual 
style properties. 


<span id= M decision2" class= M decision" onclick= M changeScene(2)" 
onmouseover= M this.className = 'decisionhover'" 
onmouseout="this.className = 'decision'" 
style= M visibility : hidden，’></ span> 

From then on, showing and hiding the element is just a matter of setting 
the visibility style property to visible or hidden. 


document.getElementByld( n decision2").style.visibility 
document.getElementByld("decision2").style.visibility 


r^lj^rpei your pencil 



Scdohd op-fcioh. 


Some scenes in Stick Figure Adventure must alter the visibility of the second 
option element when changing to a new scene. Circle these scenes, and then 
annotate the decision where each scene should show or hide the option. 



n 

1 v/'mdo>w 



Ea-tc« 

J Vrtdh 

| rue bhv 







To be 








♦ 




you are here ► 


377 













































sharpen solution 


Jiarpen your pencil 
l Solution 


Scdohd op-fcioh. 



Some scenes in Stick Figure Adventure must alter the visibility of 
the second option element when changing to a new scene. Circle 
these scenes, and then annotate the decision where each scene 
should show or hide the option. 



TV^c scdond ^ould 

be W.aacv. m av^Y tv.at leads 
{jo a set^t ^ oA^j o^t Atc\s\o^ 
as start 十 … ㈣ c . 



SV\ov/ 


T\\t stCov\A dc^isior\ 士你⑼七 
ohly heeds b> be siiovm ov\Ct, 
>^i\\tY\ d v\t^i bc^ms. 


栏 adli s£.ChC rnus"t show ov 
hide the sedohd dedisioh 
clcrwCh-t usihj the visibility 
p^ropcvly O-P the style object 


p- - Scene A - 



1 Little \\o\asc 

1 \ y \ *tKc v/oods 




Wide- 






Hide- 


Y/mdo>/ 


Baicv\ by 

v/i 七 

the enp 


Bsicv\ by 
*bvoll 

the enp 


To be 

doyr\*b»yvucd • 


♦ 


ic- 


Hide- 


Tvoll OY\ 

bridge 


To be 

dorrti 灼 ucd … 


_ 


叫⑶ tk game chds, the sedohd 个 
dedisioh clcmcht should be hidden 一 ^ 
M ： the dha^gc has -to to^t m -the 
sdChC l^dihg up -to the game Chdihg. 


♦ 


case 7 : 

if (decision == 1) { 

curScene - 6 . -t-roll } s tasty lunch. 

message = "Sorry, you became the tro 

decisionl = "Start Over"; 

decision2 = ’"、• 

I Hide the second decision ■ 。 w "M 廿 v 

C^=it. g etE i e _t By Id ( ，， deC 1S _2 ”） •啦 le. V1Slb mt y 

else { 

curScene 二 
decisionl 
decision2 

} 

break; 


▼hidden’ 


378 Chapter 8 

















































wrangling the page 


BULLET POINTS - 

■ The className node property makes big style 
changes by changing the entire style class of a node. 

■ The style node property makes small style changes 
by providing access to individual style properties of a 
node. 

■ A CSS style class has nothing to do with a JavaScript 
class—they are completely different things. 


■ Elements on a page can be dynamically shown or 
hidden using the visibility style property of the 
element object. 

丁 he display style pv-opev-ty dah 
addornplish a similav- show/hidc C-ffcdt 

by settmg it -to display：hOhc Chide) oy 
display: blodk (show). 


No more bogus options 


Manipulating individual styles using the DOM allows the 
second decision element to be selectively shown and hidden. 
The end result is a user interface that makes a lot more sense 
now that the empty decision elements are gone. 



The sctoY\d dedisio^ demerit is 
y\o>n i*t is^*t r\ttdtd, 

sudh as o 内 -the 
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big or decision tree 


More options, more complexity 

Ellie envisions the Stick Figure Adventure storyline growing by leaps and 
bounds to reveal all kinds of interesting new scenes and decisions. There 
are ways the DOM can factor into helping manage the complexity of a 
much deeper Stick Figure Adventure narrative. 



Deeper adventure = Bigfgfer ctecision tree! 


决 The latcs-t vcv-sio^ o( -the Siidk Fijuv-c is artd 

(or youv- todmj assis-fca^c- Dov/hload this at h*btp://y/\wv/. 
hcad-fiv-s-tlabs.dorw/books/h-pjs/ i-p you haver / 七 akeddy- 
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门 



1 the m 

m 




Wow! That’s a lot of decisions... but it seems 
like it would be a nightmare to test. 




Big stories can certainly turn 
into big problems without a 
way to test the decision tree. 

As the story continues to unfold with 
more scenes and decisions, it becomes 
increasingly difficult to test the logic of 
the story and make sure every decision 
path leads to the right place. Stick Figure 
Adventure is in desperate need of a way 
to analyze paths through the story. 





What do you think might be the best way to create testing 
paths through such a monstrous decision tree? 
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following the trail 


Tracking the decision tree 


Similar to the history feature in a web browser, which keeps 
track of the sequence of pages you’ve visited, a decision 
history feature in Stick Figure Adventure can be used to test 
and debug the storyline. The idea is to reveal the series of 
decisions that leads to a particular outcome. By doing this 
Ellie can make sure the decision path works as expected. 



The decision history is built as a list of the options and scenes that occur 
in any given path through the story. The history then serves as a story 
debugger that lets Ellie trace back through options and scenes. 


Start Scene 0 - Title intro. 


pctis\oy> I 

IS AoSC 灼 ... 




令 

令 

令 

令 

令 


Scene 1 - Fork in the road. 


Scene 2 - Little house in the woods. 


Scene 4 - Witch in window. 


… whi^h lead 
to scene 4-. 


s 


Scene 8 


Scene 11 -... 




End 


EaA 伽 c braised 

\s added bo 

Wist>v-y, al 叫 
Wrth 払 c dtc ： \s\o}f\ made 

-to av-v-wc 七 






What kind of changes 
are required to the 
Stick Figure Adventure 
Web page to support a 
decision history feature? 
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Turw your decision history into HTML 


From an HTML perspective, the code for the decision history isn’t too 
terribly complex: a div element and a paragraph of text for each decision 
is all that is needed. 


<div id= M history M > 

<p>Decision 1 -> Scene 


^Oh-taihs a d 拉 isioh ih 
七 he dc^isioh Kis*tov~y. 


. : Fork in the road.</p> 
<p>Decision 1 -> Scene 2 : Little house in the woods.</p> 
<p>Decision 1 -> Scene 4 : Witch in window.</p> 


</div> 

All that remains is writing some JavaScript to use the DOM to generate 
the decision history as a collection of nodes. 


Thafs crazy. You 
can’t just create 
new paragraphs at 
will... can you? 



A ctecision kisto 
ieature in Stick 
Figure Adventure can 
te a very useful story 
debugging tool. 



The DOM can create any HTML element at will, 
including paragraphs of text. 

Actually, you can. And it involves another method of the document 
object, createElement (), which can be used to create any HTML 
element. The idea is that you create a new container element using 
createElement (), and then you add text content to it by creating a 
child text node with createTextNode () . The end result is an entirely 
new branch of nodes grafted onto the node tree of a page. 
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monkeying around with the HTML 


Mawufacturiwg HTML code 


^ stairt M With a hew p 
dcruCht -floatmg ih spa^c. 


Creating a new element with the createElement () method only 
requires the name of the tag. So creating a paragraph (p) element simply 
means having to call the method with an argument of "p f, , making sure 
to hang on to the resulting element that is created. 


var decisionElem = document.createElement("p"); 

At this point there’s a new paragraph element with no content, and it’s 
not yet part of any page either. So to add the text content to the element, 
create a text node and then add it as a child of the new p node. 



decisionElem.appendChild("Decision 

丁 he p clcmcht is still -floatihg ih syau, 
but \i how has some text doh-tch-t thahks 
to a hew dhild text hode. 


1 -> Scene 


Fork in the road.")); 



The last step is to add the new paragraph element to the page as a child of 
the history div element. 


document.getElementByld("history").appendChild(decisionElem) 


丁 k P clcr^ch-t is added as 
a ^hild o-p dh cxis*tih0 div 
clench 七 ， whidh "the 

m-to the web page. 



By repeating these steps whenever each scene is traversed in Stick Figure 
Adventure, a decision history can be created dynamically. 
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BULLET POINTS - 

■ Any HTML element can be created using the 
document object's createElement () method. 

■ To add text content to an element, a child text node must 
be created and appended to the element. 


■ By carefully adding and removing nodes in the DOM 
tree, a web page can be disassembled and reassembled 
at will. 


Add code to the changeScene () function to support the decision history 
feature in Stick Figure Adventure. Hint: You need to add a new paragraph 
element with a child text node to the decision history element when the 
current scene isn’t Scene 0, and clear the decision history if the Scene is 0. 

function changeScene(decision) { 



// Update the decision history 
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your pencil 
Solution 


Add code to the changeScene () function to support the decision history 
feature in Stick Figure Adventure. Hint: You need to add a new paragraph 
element with a child text node to the decision history element when the 
current scene isn’t Scene 0, and clear the decision history if the Scene is 0. 


*bV^c 七 o 七 

y>odc -to -bV^c ^ 


function changeScene(decision) 


The WW 

aWcsdy V^as a \ota\ variable 

dct*is*iov\, so {\\\s variable 
muS*t be haw'Cd SomC*tWmJ else* 



// Update the decision history 

vav- his*to\ry — dodumc^*t-5c*tElcmc^*tBy|d( w h 

i-f (C[A^CtY\C / — O) { 


the his-fcovy 
div us'rng i-ts ID. 



// Add/the la*tcs*t dtt\s\oY\ bo the his-tov-y 

va\r dc£.isio»}Elcm =• .和 — 七(:: p”); 
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Tracing the adventure story 


The decision history feature in Stick Figure Adventure now makes it 
possible to carefully track the story logic as it unfolds. 



I rnprt 


to 

STICK FIGURE 

awehtuke 




_ s ^y hash't started 

So is y\o his-tovy. 


The decision history is 
awesome! I can finally cut loose 
creatively and still keep the 
decision tree under control. 


T\\t Kis-tovy 

yro^NS as *bV^c 
s*tov*y uKv^olds. 






Ttn-sui iM ■ li M 


■Hrldlmrl 

Vw* 1 *— Fiinn H»| >■ ■*** 蛘 麗 *^ _ 

^^1*^1* m-T- ^ , " 


The s-to\ry pa-th Completes 
•… "the dedisioh his"tov~y 
whch ah Chdihg is v-ca^hcd. 
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the neverending story 


A long strawgc trip... 

It’s time to flex your creative muscle by expanding the Stick Figure 
Adventure story into something worthy of some serious decision history 
debugging. Your stick figure friend is waiting for adventure... 





Dream up your very own continuation of the Stick Figure Adventure story, and add code to 
incorporate it into the Stick Figure Adventure application so that you can share it online as an 
interactive adventure. 


There is no solution to this exercise... just have fun dreaming up adventures! 
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wrangling the page 



JavaScriptcross 

Before you dig too deeply into stick figure story writing, take 
a moment to experience a little crossword adventure! 



Across 

I. A node appearing below another node in the DOM tree is 
called a ■…" 

4. The property of a node object used to get its value. 

5. Used to set the style class of an element. 

7. Call this method to get all of the elements of a certain type, 
such as div. 

10. This type of node holds text content. 

II. A DOM node type that equates to an HTML tag. 

12. Use this method to add a node to another node as a child. 


Down 

1. Call this method to create an HTML element. 

2. The topmost node in a DOM tree. 

3. A non-standard way to change the content of an HTML 
element. 

6. A clumsy way to tell an online story. 

8. A leaf in a DOM tree of Web page content. 

9. Use this property to access individual style properties of an 
element. 

13. Set this attribute on an HTML tag to make it accessible from 
JavaScript. 
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JavaScriptcross solution 



JavaScriptcross Solution 
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wrangling the page 



Fold the page vertically 
to line up the two brains 
and solve the riddle. 


<T 


V 嫩 


Wkat is tke DOM, really? 


I Vs d o( m’mds, <r 




Document 






c 




<html> 

<head></head> 

<body> 


DOM 


DOM <span>is 


<strong>o ften< 


html 


jtrong> 


confused! 


i 


ith</span> 


control• 


</p> 


</body> 


^>vjhich is<7 




1 div 


1 





head 


"The DOM" 



■ 

span 





—/- 

Tf is ff 





the browser. 


span 



confused with' 



'which is 



A JavaScript programmer must te careful not to 

get carried away witk tke DOM. It 

is certainly kancty lor accessing HTML 
tags. But try not to become a total 
manipulator, or you may wear out your nodes* 
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9 bringing d^ita t9 li¥e 



JavaScript objects aren’t nearly as gruesome as the good 

doctor might have you think. But they are interesting in that they combine 
pieces and parts of the JavaScript language together so that they’re more powerful 
together. Objects combine data with actions to create a new data type that is much 
more "alive" than data you’ve seen thus far. You end up with arrays that can sort 
themselves, strings that can search themselves, and scripts that can grow fur and 
howl at the moon! OK, maybe not that last one but you get the idea... 


this is a new chapter 
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party time 


A JavaScript-powered party 

There’s a party, and you’re responsible for the invitations. So the first 
question is what information goes into the perfect party invitation? 


Who? 


C^The invitee^ 


display! 


What? 

A puzzle party 


Where? 


Whew? 





he date/time 





|y\vi*tatior\ da*ta- 


Display the data 


/" 


(hvi-t^-tioh 3d~tiohS. 



deliver! 



Deliver the data 



A party invitation for JavaScript would model the data as variables 
and the actions as functions. Problem is, in the real world the 
ability to separate data and actions doesn’t really exist. 





In the real world, the invitation card combines data and actions 
into a single entity, an object. 
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bringing data to life 


Pata + actions 55 object 


You don’t always have to work with data and actions as separate things in 
JavaScript. In fact, JavaScript objects combine the two into an entirely 
unique data structure that both stores data and acts on that data. This 
functionality allows JavaScript to apply real-world thinking to scripts. So 
you can think in terms of “things” as opposed to separate data and actions. 

When you look at the party invitation in terms of a Java Script object, you 
get this: 


Object 


Data 


var who; 
var what; 
var when; 
var where 


Actions 

function display(what, when, where) 


+ 


function deliver(who) 





Ou'tsidc o-f 3^ object 
data must be passed 


Inside the invitation object, data and functions now co-exist and have 
closer ties than they had outside of the object. More specifically, functions 
placed within an object can access variables in the object without having 
to pass the variables into the functions as arguments. 




Objects link 
variables 
and functions 
togetker inside 
a storage 
container. 


The data within the invitation object is accessible to the functions but 
hidden from the outside world. So the object serves as a container that 
stores data and links it to code that can take action on it. 
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membership has its privileges 


Aw object owws its data 


When variables and functions are placed within an object, they are 
referred to as object members. More specifically, variables are called 
object properties and functions are called object methods. They still 
store data and take actions on data, they just do so within the context of a 
specific object. 

Variably 





Properties 
and itietkocis 
are tke otject 
equivalents oi 
variables anct 
functions. 


Properties and methods are “owned” by an object, which means they 
are stored within the object much like data is stored in an array. Unlike 
arrays, however, you typically access object properties and methods using 
a special operator called the dot operator. 


The hai 
"the obje 乙 



Xsi a doi (pcv-iod). 


丁 he of the 

fvopc\rty ov- method. 
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bringing data to life 


Object member references with a dot 

The dot operator establishes a reference between a property or method 
and the object to which it belongs. It’s kind of like how people’s first 
names tell you who they are, but their last names tell you what family 
they belong to. Same thing for objects — a property name tells you what 
the property is, while the object name tells you what object the property 
belongs to. And the dot operator connects the two together. 

Now it’s possible to actually put together the data for a JavaScript 
invitation object using properties and the dot operator: 



invitation.when = "October 24th"; 


invitation.where = "2112 Confounding Street"; 

dot opev-^-fcov- is used 
"to BCtcss p\ropc\rty. 

Keep in mind that since the data and the actions are all part of the same 
object, you don’t have to pass along anything to a method in order for it 
to be able to use the data. This makes taking an action on the invitation 
object quite simple: 

invitation.deliver(); 

Objcti V 跡。 d_. 


Tke dot operator 
references a 
property or metkoct 
Irom an otject. 



The party invitation is missing an RSVP property that allows invitees to respond with whether 
they will be coming to the party or not. Write code to add an rsvp property to the Puzzler Ruby 
invitation (she plans to attend), and then call the sendRSVP () method to send the response. 
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ask me anything 



E%eRcl$e 


The party invitation is missing an RSVP property that allows invitees to respond with whether 
they will be coming to the party or not. Write code to add an rsvp property to the Puzzler Ruby 
invitation (she plans to attend), and then call the sendRSVP () method to send the response. 


'mvi*ta*tio^\rsvp — 


*mvi*ta*tio^sc^dRS\/PO ； 


丁 he doi opcira-tov \rc-fcv-chdcs 

prop 吻 ahd method 

J the ihvi-btioh object 


TKis ^ould also be a boolean 

y/ilCV-C *tvuc mea 灼 s fcv-soir\ is 

^alsc means -t^cyVc ⑽ t 


thereicire no o 

Dumb Questi 9 ns 


Q/ What exactly is an object? Does it 
have a data type? 

Yes, objects have a data type. An 
object is a named collection of properties 
and methods. Or put more exactly, objects 
are a data type. Other data types you've 
learned about include number, text, and 
boolean. These are known as primitive 
data types because they represent a 
single piece of information. Objects are 
considered complex data types because 
they encompass multiple pieces of data. You 
can add "object" as a fourth data type to 
the list of primitive types you already know 
(number, string, and boolean). So, any object 
you create or any built-in JavaScript object 
you use has a data type of object. 

Couldn’t I just use global variables 
and functions instead of object properties 
and methods? Functions can access 
global variables just fine, right? 

Yes they can. Problem is, there is 
nothing stopping any other code from 
accessing the global variables as well. This 
is problematic because you always want to 
try and limit data exposure only to code that 


truly needs access to the data. This helps 
prevent the data from getting accidentally 
changed by other code. 

Unfortunately, JavaScript doesn’t currently 
allow you to truly prevent an object property 
from being accessed by outside code. And 
there are situations where you specifically 
want an object property to be accessed 
directly. However, the idea is that you place 
data in an object to logically associate it with 
the object. A piece of data tied to an object 
has much more context and meaning than 
a piece of data floating freely in a script (a 
global variable). 

I’ve seen object notation with the 
dot operator used several times already. 
Was I really using objects all this time? 

Yes. You’ll find that it’s actually quite 
difficult to use JavaScript without using 
objects, and that’s because JavaScript 
itself is really one big collection of objects. 
For example, the alert () function 
is technically a method of the window 
object, which means it can be called with 
window . alert (). The window 
object represents the browser window, and 
doesn't have to be explicitly referenced as 


an object, which is why you can get away 
with alert () by itself. 

OK, this is really confusing. So 
you’re telling me that functions are really 
methods? 

Yes, although it can get confusing 
thinking of functions in this manner. You 
already know that a function is a chunk of 
code that can be called by other code by 
name. A method is just a function that has 
been placed within an object. The confusion 
arises when you realize that every function 
actually belongs to an object. 

So alert () is both a function and a 
method, which explains why it can be called 
as a function or as a method—most methods 
have to be called as a method using object 
notation. In reality, every JavaScript function 
belongs to an object, thereby making it a 
method. And in many cases this object is 
the browser's window object. Since this 
object is assumed to be the default object if 
no object is specified for a method call, such 
as alert () ， it’s OK to think of these 
methods as functions. Their ownership by 
the window object is incidental since they 
have no logical connection to the object. 
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bringing data to life 


BULLET POINTS - 

■ Objects are a special kind of data structure that 
combine data with code that acts on the data. 

■ In practical terms, an object is really just variables and 
functions combined into a single structure. 


■ When placed into an object, variables become known as 
properties, while functions become known as methods. 

■ Properties and methods are referenced by supplying the 
name of the object followed by a dot followed by the 
name of the property or method. 


A blog for cube puzzlers 

On the other end of the party invitation is Ruby, a cube puzzle enthusiast 
who can’t wait to get together with her other puzzler friends. But Ruby 
has more on her mind than just going to parties — she wants to create a 
blog where she can share her love of cube puzzles with the world. She’s 
ready to start sharing her cubist wisdom on YouGube! 




Ruby has heard that JavaScript supports custom objects as a means of 
creating more robust, and ultimately more manageable code. She has 
also heard that lots of blogs eventually get stale because bloggers get 
tired of maintaining them. So Ruby wants to start her blog out on the 
right foot by building YouGube as an object-oriented script using 
custom objects that will carry her far into the puzzling future. 


Object-oriented ■ More cube 
YouCube ■ time! 


Ive heard that objects will make my 
code easier to maintain when I need to 
make changes. That will give me more 
time for my cube puzzles! 
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be the cube 


Pecowstructiwg YouCube 


Ruby currently has a handwritten diary, and she’s read enough blogs to know 
hers will need to consist of dates and text, but she can’t figure out how to store 
them using JavaScript. She just knows she’s sick of writing her cube diary 
(soon to be blog) entries by hand! 


Vaie -the 

Ch-t\ry. 




08/H/2008 
Got the new ccibe I ordered. If s a real 
pearl. 

08/19/2008 

Solved the new cube belt of cocirse, now 
Im boned and shopping Von a new one. 

08/16/2008 

Managed to get a headache foiling oven 
the new ccibe. 

Gotta nap. 


"The hahdwv-i-t-tch 
YouCube- 


Bach er\iry 

d 。 灼 sists a 

dombmed a 


Rubys 
tube puzzle. 


t 


Pocjnd a 7x7x7 cebe for sale online. Yikes! 
That one cocild be a beast. 




Ruby desperately needs a straightforward way to store and access multiple 
pairs of information (date + text). This sure sounds an awful lot like what 
JavaScript objects have to offer...combining multiple pieces of information 
into a single entity. 

Blog date + Blog body = Blog object 


A custom object allows 
tke two pieces oi tlog 
data to te comliinect 
into a single entity. 
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Custom objects extcwd JavaScript 

The JavaScript language includes lots of handy standard objects, several 
of which we explore later in this chapter. As useful as these objects are, 
there are times when they simply aren’t enough. The YouGube blog is a 
good example of this limitation since it involves a data storage problem 
that can’t be solved with built-in JavaScript data types...a custom object is 
in order. 


Array 


08/14/2 


^19^2008 


° 8 / 2 l /2008 


ftv-v-ays av-c 


i us "t -Pov- -the 
*Cubc bW 


okjct*b, i*t w — 毛 be 一 

•bcwfbmj -to s*to\rC Wo^ 

cy\*tv-\cs m a 2 --P 


Custom objects allow you to add features to JavaScript that suit your own 
specific needs. In Ruby’s case, a custom object could model a blog entry, 
using properties to represent the blog date and body text. Additionally, 
methods can be used to add behavior to blog entries, making it more 
intuitive to create and manage them. 

In order to bring such a custom object to life, however, we must first find 
out how custom objects are created... 


Its tiruc ； s-t\r'm 0 s 
\rcally objects/ 




S-ta^da^rdi JavaSoft 


BI 05 date 


Date 


08/14/2008 


The Bloj object scv*vcs 
3 s a ^ompouirtd 
"type — "two 

pieces o( nvfco o^c- 


October 24th 


2008 


Blog 


■Got 


the 


new 


cube I 


ordered 


Ifs 


real 


pearl 


a 


Got the 


new 


ordered 


cube 


real 


lt，s 


a 
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caution: construction zone 


Construct your custom objects 

Since objects have data associated with them that must be initialized when 
an object is created, a special method called a constructor is required 
to get an object up and running. Every custom object requires its own 
constructor, which is named the same as the object. The constructor is 
called to initialize an object upon creation. When creating a custom object, 
it’s your job to write a suitable constructor that brings the object to life. 


丁 ^ 

dv^d 


A constructor is 
responsible lor 
creating an object. 


The p\ropc^!?s 




lnvitation(who, what ， when ， where); 


TKc seated 

•to use. 


The o( -the 

^o^s-tv-ud-fcov- 

the object 灼 amc. 


Invitation 



To create an object with a constructor, you use the new operator, which 
kickstarts the object creation process by calling the object’s constructor. 

The constructor part of creating an object looks like a call to a method 
because that’s really what it is. However, it’s important to always use 
the new operator to initiate the creation of an object, as opposed to just 

calling an object’s constructor directly. , 

TVic 灼 cw ofcv-axov- is used 

■bo tv-ca*tc a object. 


var invitation = new Invitation ("Somebody n , "Something 1 

objct*t is is 

… a v3v*"i3blc* 亡 ailed jus 七 like a 


Sometime 


Somewhere"); 




TV>c pvofcvtics avc set by passm^ 

av^urwC^ts *to *tKc ^Oir>S*tvud*tDV-. 
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Whafs iw a constructor? 


A big part of the constructor’s job is establishing the properties of an 
object, along with their initial values. To create a property within a 
constructor, you set the property using a JavaScript keyword called this. 
The this keyword assigns ownership of the property to the object, and 
also sets its initial value at the same time. The word literally does what 
it means — you’re creating a property that belongs to “this” object, as 
opposed to just being a local variable within the constructor. 


The this kcywov-d is 
what dis-tihguishcs ah 
objed： plropc\rty 

a hov-r^al variable. 



function Invitation (who, what, when, where) 


Cor\s*bvu^*to\rs av-C 
alv/dys tafitar»z^d, 



Object properties are created and initialized in a constructor by using 
object notation (the dot operator) and the this keyword. Without the 
this keyword, the constructor would not know that you're creating 
object properties. The result of this constructor is the creation of four 
properties, which are assigned the four values passed as arguments into 
the constructor. 


Tke tki$ key word is 
tke key to creating 
object properties 
inside a constructor. 


— your pencil 


Write a constructor for a Blog object that creates and initializes 
properties for the date and body text of a blog entry. 
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make it work 


(^Jterpen your pencil 

Solution 


Write a constructor for a Blog object that creates and initializes 
properties for the date and body text of a blog entry. 

The do 灼 S'brufrtoV" 

is the.Blo^bodiy, da*tc).{ 

七 k The body a^d date 


same ds 
object 


... .iK'? ： lp.94.Y.rr. )??.4 $.吹 .TT???^7T7777~.... -.^c. p •办故 d. inip. .iKe. 

d *t J 丄 ^ohsiv-ud-tov- as avjurwChts. 


daic ； 


T\\t this keywov-d 

y-c*fcvcir\^cs 

fv-opcv-t'ics 

■t^c object 


} 



The p\ropc\rtics av-c 
ihitializjcd usih^ 
do^st\rud-to\r a\rgumchts. 


bringing blog objects to life 

The Blog object is certainly shaping up but it hasn’t actually been created 
yet. As good as it may seem in theory, it’s still just a hypothesis yet to be 
proven. Remember that the constructor establishes the design of an object 
but none are physically created until you use the new operator, which then 
builds the object by calling the constructor. So let’s go ahead and create a 
real live Blog object. ^ 

Follow with the examples, 

JavaSoft available -fo\r download ai hii\>：// 

BI03 object www *hcad^i\rstbbs^om/books/h-fjs/. 


tta^dv/v-it-tch 

blog Chtiry. 
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I’m confused about object creation. 
Does the new operator create an object 
or does the constructor? 

Both! The new operator is responsible 
for setting the object creation in motion, 
and a big part of its job is to make sure 
the constructor gets called. Just calling a 
constructor like a function without using 
the new operator would not create an 
object, and using the new operator with no 
constructor would be meaningless. 

Does every custom object require a 
constructor? 

Yes. The reason is because the 
constructor is responsible for creating the 


object’s properties, so without a constructor 
you wouldn’t have any properties. And 
without any properties, you wouldn’t have a 
very meaningful object. 

There is an exception to this rule about 
constructors, and it applies when creating 
a purely organizational object consisting 
of a collection of methods that don’t act on 
object properties. In this case, it's technically 
possible to do without a constructor. But 
keep in mind that such an object isn’t exactly 
a shining example of good object-oriented 
programming practices because it’s really 
just a collection of related functions. Even so, 
JavaScript itself employs an organizational 
object for grouping together math related 
tasks, as you learn later in the chapter. 


What exactly is this? 


this is a JavaScript keyword used 
to refer to an object. More specifically, 
this references an object from within 
that same object. Yeah, that sounds pretty 
weird, and slightly schizophrenic. But it 
makes sense once you wrap your brain 
around it. To look at it in real world terms, 
think about what would happen if you lost 
your watch and someone found it in a room 
full of people. When they hold the watch up, 
you would probably yell, "It’s my watch!" You 
used the word "my" to refer to yourself. More 
importantly, the word "my" is used to clarify 
that you are the owner of the watch, this 
works exactly the same way—it implies 
object ownership. So this . date 
means that the date property belongs to 
the object in which the code appears. 


c^|terpen your pencil 


08/H/2008 ^ 

Oof the new cube I ordered. If s a real 
pearl. 

08/19/2008 

Solved the new ccibe bof coorse, now 
r 卬 boned and shopping for a new one. 

08/16/2008 

Managed to get a headache foiling over 
the new cube. 

Gotta nap. 

08/21/2008 

Foand a 7x7x7 cobe for sale online. 丫 ikesl 
That one coaid be a beast. 


Create an array of Blog objects in a variable named blog that 
is initialized to the blog entries in the YouCube blog. Feel free to 
just write the first few words of body text in each entry. 


ar blog = 
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sharpen solution 



Let’s take a peek at the code required to bring the Blog objects to life 
and make YouGube 1.0 a reality... 


08/H/2008 ) 

Oof the new cube I ordered. If s a real 
pearl. 

08/19/2008 

Solved 十 he new cube bof of coarse, now 
Im boned and shopping for a new one. 

08/16/2008 

Managed to get a headache foiling over 
十 he new cube. 

Qoffa nap. 

08/21/2008 
Foand a 7x7x7 cabe for sale online. 丫 ikesl 
That one coold be a beast. 


YouCube 1.0 


Create an array of Blog objects in a variable named blog that 
is initialized to the blog entries in the YouCube blog. Feel free to 
just write the first few words of body text in each entry. 

r ar blog = 

Blojf^SoIvcdl *thc ^cv/ dubc bu*t o( douv-sc w O ^/1 ° {/ 2 . 00 ^), 

Blojf^Ala^a^cdl *to yt a headache *toiln^" ” ， 1 ) O t ^/\^/ 2 ~OOQ > }1 ) 1 
v\t^i Blojf^Foui^d B IyH%! dubc -fo\r sale...' ” 0 必 / 2 J/ZOO 公 ’’）]; 

Ea 乙 h blog Cht\ry is d\rcatcd 

■ - as a Blog object with i*ts 

owh body ic%i av\d daic. 


Combining the array of Blog objects with some JavaScript code for 
displaying the blog data yields an initial version of YouGube. Ruby 
knows her work is not done, but the blog is up and running, a 
happy with the early results. O n 


The dd'td s-fcoved \v\ 
Cddh Blo^ object is 

neatly displayed ov\ 
the Y^^Cubc pa^e- 


tauQu\>t - Th， ㈣ foi 

YauCuIm - 'Th,t Blo^ far Cuht Punlm 


eulK CwfeK'S. Ifi a real pt4ri. 

Hr|M, , 2 J 0 CH 1 


_ tEadKhc 砂咖 . CkrtB 峰 

cubr t« ®lbr. Vlkni Th-ooc^bc.b^L 
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YmOibe Tip Cl^se 



<html> 

<head> 

<title>YouCube - The Blog for Cube Puzzlers</title> 


<script type= M text/javascript M > 
// Blog object constructor 
function Blog(body, date) { 

// Assign the properties 
this.body = body; 
this.date = date; 


The Blo^O do 灼 stvu^tov dv-ca*tcs 
-tKc *t>wo blo^ fvofcv-tics. 

_TKc av-v-ay o-f 




// Global array of blog entries 

var blog = [ new Blog("Got the new cube 工 ordered.. n , "08/14/2008 "), 

new Blog ("Solved the new cube but of course . . r "08/19/2008 "), 
new Blog("Managed to get a headache toiling .., "08/16/2008 "), 
new Blog ("Found a 7x7x7 cube for sale online. "08/21/2008") 


var d 丄 og = 

The showBlogO 
dv*3ws the blog Ch*t\rics -fco 
"the bloj w div on -the 

Sho'^the list of blog entries 


function showBlog(numEntries) { 

Adjust the number of entries to show the full blog, if necessary 
f (!numEntries) 

numEntries = blog, length; ^ - - if iht hur^bev- of blog chtv-ics b> 

// Show the blog entries 
var i = 0, blogText =""; 

while (i < blog.length & & i < numEntries) { 


show wash'-t passed as 
show all Jc the Chtv-ics. 


// Use a gray background for every other blog entry 


if (i % 2 == 
blogText + 
else 

blogText + 


0 ) 



<p style =/r background-color : #EEEEEE r ; 

Al*tcv-v\a*tc badkyou^d tolov o-f blo^ 

tv\br\ts so -tiicyVc casicv -to v-cad. 

// Generate the formatted blog HTML code 

blogText += "<strong>" + blog [ i ] . date + "</strongxbr /> ▼’ + blog [ i ] . body 


’ <p> 


’ </p>' 


i++; 



// Set the blog HTML code on the page 
document•getElementByld( n blog n )•innerHTML = blogText 


Set the 

k)log Chtiry Codt io 
the “blog’ div. 


</script> 

</head> 

<body onload= M showBlog(5);"> 

<h3>YouCube - The Blog for Cube Puzzlers</h3> 

<img src="cube.png" alt= M YouCube n / > 

<div id= M blog M ></div> 

<input type="button" id= M showall n value="Show All Blog Entries 
</body> 

</html> Show dl! blog Ch-tvics whch 

the but-fcoh is did^d. 


TV^C div, starbs out emfty Wt 

y*ts -filled ^matted bloj dala- 


onclick= M showBlog();" / > 
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why, why, why 


Why is the Show All Blog Entries 
button necessary in YouCube? 

In the current state of the blog, the 
button is not necessary at all since there are 
only four blog entries total. But as the blog 
grows, it becomes increasingly important 
to limit the number of entries shown initially 
on the main YouCube page to keep from 
overwhelming visitors. So the blog code 
defaults to only showing the first five entries. 
The Show All Blog Entries button overrides 
this default by displaying all blog entries. 



Why is innerHTML used to 
show the blog entries instead of DOM 
methods? 

Although DOM methods are certainly 
preferred in terms of web standards 
compliance, they are fairly unwieldy 
when it comes to dynamically generating 
highly formatted HTML code. The reason 
is because every container tag such as 
<p> and 〈 strong 〉 has to be created 
as a parent with child nodes for their 
content. innerHTML is a tremendous 


convenience in this case, and simplifies the 
YouCube code considerably. 

Why doesn’t the Blog object have 
any methods? 

Ambition, that’s good! The truth is that 
there are plenty of other aspects of YouCube 
to work on before Blog methods become 
a true priority. But don't worry, methods are 
definitely part of the long-range plan for 
YouCube. Methods are an important part of 
any well-designed object, and the Blog 
object is no different. 


A disorderly blog 


YouCube 1.0 looks good but it isn’t without its flaws. Ruby has noticed that 
the blog entries are in the wrong order — they really should appear with 
the most recent post first. Right now they are displayed in whatever order 
they are stored, which we can’t count on being chronological. 


Tke order ol tlogf 

entries skoulct te 
most recent first. 



I just realized that I don’t 
always write the blog 
entries in chronological 
order...thafs a problem! 


n n 






Uiu mm cuhu 


nnkiiwl. 11 


Tliiil pviiiTl 


Uscv-s 

七 kloj 

-to be 

mos*t 


mmm 


SoJvcd Ihc new cube but ofeouese 


I m bored and sftoppjnt for a 


IJOW 


new one. 


mmmH 


to jmA 


CKsidiirhc loidifiu over th 


eu be 




UuHa nap 




a 7x7x7 cube for ssk online 


、 此3! Thai one couM be 


bem 


Show Ml Moa Emries 
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bringing data to life 


The need for sorting 


Ruby’s solution to the blog ordering problem is to sort the blog array by 
date. Since JavaScript supports looping and comparisons, it should be 



possible to loop through the blog entries, compare dates to each other, and 
sort them into reverse chronological order (most recent posts first). 

Blog 


Swap these two blo^ 

伙 Vies s\uc the SC^Ohd 


TVis 


Loop through the 
blog array. 


Compare the date of each Blog object 
to the next one. 


If the next blog entry is more recent than the current 
entry, swap them. 


blo^ tv\{x^ should 
appeav- -rivs*t smte iVs 
七 he mos*t \re … 七 . 


Blog 


Blog 


Blog 


This blog sorting solution has some merit and sounds like it could work, 
assuming we can work out the details of comparing blog dates. 


Wait a minute! If dates are stored as 
strings, how can you compare them to 
see which one is most recent? 


A date stored in a string isn’t really a date. 

Ruby’s blog sorting strategy has run into a serious snag due to the fact that 
a date stored as a string has no concept of time. In other words, there is 
no way to compare the strings "08/14/2008" to "08/19/2008" to 
see which one is more recent because they are just strings. Although it 
is possible to compare strings, such comparisons don’t understand the 
specific format of a date, and therefore aren’t able to compare the month, 
day, and year components of a date when carrying out the comparison. 

So before we can think seriously about sorting the blog entries by date, we 
first need to rethink the manner in which dates are stored in the blog. 
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have you seen my date 


A JavaScript object for dating 


What Ruby needs is the ability to store a date in such a way that it can be 
compared to other dates. In other words, the date needs to understand 
that it is a date, and behave accordingly. Wait a minute, that sounds a lot 
like an object! And as it turns out, JavaScript offers a built-in Date object 
that could very well be what Ruby needs. 

Date ^ 

i^r 


The daic o( -the 

bloj Ch-fcv-y. 


Methods 

sc 七 date da 七 a. 



Methods 

date dd*td- 


Tke built-in Date 
object represents 
a moment in time. 


The Date object represents a specific moment in time, down to the 
millisecond, and is a standard part of JavaScript. Although the Date 
object certainly uses properties internally, they are invisible to you, the user 
of the object. You work with the Date object purely through its methods. 

Similar to the Blog object, you create a Date object using the new 
operator. Here’s an example of creating a Date object that represents the 
current date and time: 


object m a vahaklc 



var now = new Date(); 


Witkin tke Date 


Create d Date object 
the hew opev-a-fcov- 



V 


TWis … Pa*tc okjett 
6 u\rv-cyrt da 七 c/ 


otject, time is 
expressed in 
milliseconcts. 


This Date object is created and initialized with the current date and 
time. Notice that the syntax for creating a Date object is a lot like calling 
a function or method, and that’s because you’re actually calling the 
constructor of the Date object. You can pass the Date () constructor a 
string argument to specify a date other than the present. For example, this 
Date object represents the date of the first YouGube blog entry: 


TVic date is passed -to 

as a 

s*brnr^ 七 e 乂七 . 


var blogDate = new Date("08/14/2008") 
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bringing data to life 


Calculating time 


One of the most powerful features of objects is how they inherently know 
how to manipulate themselves. For example, think about how tricky it 
would be to calculate the number of days between two dates on your own. 
You’d have to somehow convert a date into a number of days from some 
known reference, making sure to factor in leap years. Or you could just let 
the Date object do the work for you...check out this function that does 
the heavy lifting with a couple of Date objects: 


pate objet-b as 


Ccmv 饮 t millis^ohd 

"to sc^ohds -fco mihu-tes -fco 
howrs 匕 days. WUcJ 



function getDaysBetween(datel, date2) 
var daysBetween = (date2 - datel) / 

return Math . round (daysBetween) ; 




Rouhd the v-csult a^d 
Ktuirh it...\rouhdO is a method 

J the Mai\i object, whidh y/e 
tadkle latcm ih the ^haptev-. 


Simple but powcv-ful, 
■bWis is Code 
docs all work! 



getDaysBetween (datel, date 2 )； 


This function reveals the power of the Date object in a simple piece of 
code — a subtraction. All of the complexity associated with calculating 
the difference between two dates is conveniently buried inside the Date 
object. Our only concern is the result of the subtraction, which is the 
number of milliseconds between the two dates. Convert milliseconds to 
days, round off the result, and we have a handy little function that can be 
reused any time we need to know the difference between two dates. 



Create two Date objects for the first two YouCube blog entries. Then call the 
getDaysBetween () function, passing in the two Date objects, and displaying 
the result in an alert box. 
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exercise solution 


4 ^ 

gotlitlOH 


Create two Date objects for the first two YouCube blog entries. Then call the 
getDaysBetween () function, passing in the two Date objects, and displaying 
the result in an alert box. 


Create Pa*tc o\>\tch ― 
i\\t Uio klo^ cntv-7 da-tes. A 

( ^ 

va\r blo^Datcl — 午 /2-OO0 ’’)； 

alc\rt( w Thc dates arc scpa\ra*tcdl by w + 3? 大 PfY 步?(卜乂 •. 十 4^/0. 




Pass -tKc "two Date 


obje&ts 3s av-gumch*ts 
"to "the -fuh^tioh. 


Rethinking blog dates 


While it’s great that JavaScript offers a Date object that makes it possible 
to manipulate dates intelligently, the YouCube Blog object currently still 
stores dates as strings, not Date objects. In order to take advantage of the 
features made available by the Date object, we need to change the blog 
so that the blog dates are Date objects. 


Date 


Blog 



Got 


the 


new 


cube 


ordered 


lt，s 


real 


a 


pearl 


08/14/2008 



The date fv-ofc\rty of 七 he 
BI05 objcd*t needs *to be 
dor>vcv**tcd -Pv-om d s*tvm^ 
{o a Pa*tc objedt 


The question is, can the date property of the Blog object store a Date 
object instead of a string? 
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bringing data to life 


An object within an object 


The Blog object is a good example of how objects must often contain 
other objects. The two properties of the Blog object are actually already 
objects themselves — both properties are String objects. The String 
objects don’t really look like objects because they are created as object 
literals by simply quoting a string of text. Date objects aren’t as flexible, 
and must be created using the new operator. 

To create a blog date property as a Date object, we must use the new 
operator to create a new Date while creating the Blog object. If this 
sounds nightmarish, maybe some code will ease the fear. 




The s-tvm^ li*tcval 
auWatidally ertaits 
a S*br’m3 objcd*t- 


丁 he Blog object is dv-catcd 
us, ^9 "the hew opev-a-fcov-. 


var blogEntry = new Blog ("Nothing going on but the weather. 



This code reveals how a YouGube blog entry is now created as an object 
that contains two other objects (a String object and a Date object). 
Of course, we still need to build an array of Blog objects in order to 
successfully represent all of the YouGube blog entries. 


A Pa-tc o\)\te.i 
passed ••山 如 Blo^O 
also usm 3 ^ 


Tke new operator 




String 


body pvopev-ty 


Date 


Blog 


ot the new cub 
I ordered. It*s a 
real pearl." 


Auaust 14th. 2008 


piropcirty. 


creates otjects 
witli tke kelp oi 


constructors. 


^^drpen your pencil 


Rewrite the code to create an array of YouCube Blog objects 
where each date is now a Date object. Feel free to shorten the 
body text. 
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sharpen solution 



bloj tv\br^ still _ 

dv-catcd as a BI05 objcd-b- J 


Rewrite the code to create an array of YouCube Blog objects 
where each date is now a Date object. Feel free to shorten the 
body text. 


vav- bloj — C y\c^i 与 。七 new dube I ovde\red".’' M〆: 糊午 /娜吸 

的 cv/ Blo^f^SoIvcd r\ev/ dubc bu*t douv-sc - w , r\ev/ • 蛛 r • 碰於辦 :??? 

r\cv/ *fco jc*t 3 headache "fcoilmg … 〜的 ev/ Vsicf^OG/l ^>/ZOOG ,, )) f 

y\cv/ Bloo^Pound a dubc (or sale -^c>/ VsicC OG/ZI/ZOO^)) 3; 

. 

body 七 e % 七 J ca^K blo^ c^vry- 



Tk date -Po\r cadh BI03 object 
is ^icd as a Date ob*\c6t. 



Why is the date in a Date object stored in milliseconds? 

First off, understand that the Date object represents 
an instant in time. If you could click the Pause button on the 
universe, you'd have a frozen moment in time. But you wouldn't 
have any way to tell people when the moment occurred without 
some kind of reference. So you decide on January 1,1970 as the 
arbitrary reference point for your moment in time. Now you need a 
measurement from this offset. Maybe it's 38 years, 8 months, 14 
days, 3 hours, 29 minutes, and 11 seconds. But that's a cumbersome 
way to keep track of a time offset. It's much easier to stick with a 
single unit of measurement, one that is capable of representing the 


tiniest fractions of time. How about a millisecond? So instead of 
all those different units of time, you now have 1,218,702,551,000 
milliseconds. Yeah, that’s a whole bunch of milliseconds but big 
numbers aren’t a problem for JavaScript. 

Do I have to worry about converting milliseconds when 
using the Date object? 

It depends. The Date object includes several methods for 
extracting meaningful parts of a date that avoid dealing directly with 
milliseconds. However, if you need to deal with a difference between 
two dates, then milliseconds will almost certainly enter the picture. 


^^^BUILET POINTS - 

■ The standard JavaScript Date objects represents an 
instant in time, expressed in milliseconds. 

■ The Date object includes several methods for 
accessing the different pieces and parts of a date and 
time. 


■ The Date object is smart enough to know how to 
manipulate dates mathematically, as well as compare 
dates to each other. 

■ Like most objects other than string, you create a 
Date object using the new operator. 
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bringing data to life 


Pates aren't uscful...for humans 


With the date property of the Blog object converted into a Date object, 
Ruby is ready to turn her attention back to sorting the blog entries by date. 
Well, almost ready. It seems she has introduced a new problem in that the 
dates of the blog entries are now extremely cryptic. Ruby suspects that 
users won’t really care about the time zone of each post, and it will only 


distract from the You Cube experience. Clearly, the injection of Date 
objects into YouGube needs to be examined more closely! 


丁 he blog 

i^cssy...iOh ovc\rlo 3 d^ 



Menaced to ^ cube. Cotta nap. 


_0 jHj, YouCube - The Blog for Cube P.jszu 

YuuCubL- - Thv Bl 啤 for Cube Fuzilm 


Thu Aue 14 2408 (MSiOO'.tW 1 GMT-050^ (CDTj 

Got The new cube I ontcrMUs* a Ka] peafl. 




The Date object change made 
sense at the time but now the 
blog dates look horrible. I don’t 
even remember writing code to 
format the dates. 


Shmw All Qlng Fnrri 朽 


l^oi ov)ly do the dates 
look bad ； but "the blo^ 
CJvbries still appear ih 
"the w\rohg o\rdc\r...ugh/ 


Ruby is a bit puzzled about the cryptic YouGube dates because she 
doesn’t recall writing any code to display them. All she did was convert 
date strings into Date objects. Are evil JavaScript forces conspiring to 
make her dates ugly? 
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there’s gotta be a better way 


Cowvcrtmg objects to text 

Fortunately, there are no evil forces to blame for the ugly You Cube 
dates. In fact, it’s the very natural forces of JavaScript objects that are 
responsible for the date formatting — the dates formatted themselves! It 
works like this: every JavaScript object has a method called toString () 
that attempts to provide a text representation of the object. The cryptic 
date is the output of the Date object’s default toString () method. 


var blogDate = new Date("08/14/2008") 
alert(blogDate.toString()); 


The slick part of the toString () method is that it automatically comes 
into play when an object is used in a context where a string is expected. 
For example, the blog date alert code could be rewritten like this, and 
result in the exact same outcome: 


alert(blogDate); 



丁 he -toS-tHhgO 
method v-cvcals 
how a Vait 
object also keeps 
o-(* "the 七 irue. 



The alcir-to experts a sVma, 

【。七 he -toS-tv-ihgO method is 亡 ailed 
bchihd ^ 铋 provide a sV.ha 

o( the Pate obj^i 



TV^c mc-bv^od 

—V^cl^ul rn a 

vcfv-cscirrta-b'toy> ok a 
date, but \i also afpeavs - 
。細 -too. 


Tke toStringO 

metkoct provides a 
string representation 
oi an otject. 


Since the alert () function expects a string, the Date object is smart 
enough to know that it must provide a string representation of itself. So it 
calls upon the toString () method to handle the task. 

This toString () business wouldn’t be a problem except for the fact 
that YouGube really needs dates to be displayed in an easy-to-read format, 
such as MM/DD/ TTTT. Bottom line, it doesn’t look as if YouGube will 
be able to take advantage of the default string representation of the Date 
object made possible by its toString () method. 
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bringing data to life 


Accessing pieces and parts of a date 


Ruby needs a way to customize the format of a date. The key to custom 
formatting a Date object is accessing the individual pieces of the date, 
such as the month, day, and year. Then we can reassemble a date in 
any format we want. Fortunately, the Date object provides methods for 
accessing these pieces of information. 


o-p "the 

O a h d II. 



The day 

oy\W\ as d 

bc*tv/cc^ I a 矜 d 31. 


TT^ "Pull 午 - digit yeav". 


The Date object actually supports a lot more methods 
than these three, providing all kinds of different ways 
to access the date and time of a Date object. However, 
these three methods are all we need to whip the YouGube 
blog dates into shape. 


WatcK it! 


Pay close attention to 
the values returned 
by Date methods. 


your pencil 


The getMonth() method 
returns a month as a 
number between 0 (January) and 11 
(December), while getDateQ returns the 
day of the month in the range 1 to 31. 


Fix the cryptic YouCube blog date problem by rewriting the code 
that formats a blog entry and stores it in the blogText variable. 
Make sure the blog date is formatted as MM/DD/YYYY. Here’s the 
original version of the code: 


blogText += "<strong> n + blog[i].date 


</strongxbr />' 


blog[i].body 


’ </p>' 
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sharpen solution 


^Sharpen your pencil 

Solition 


Fix the cryptic YouCube blog date problem by rewriting the code 
that formats a blog entry and stores it in the blogText variable. 
Make sure the blog date is formatted as MM/DD/YYYY. Here’s the 
original version of the code: 


blogText += "<strong> n + blog [i] . date + "</strongxbr />' 


blog[i].body 


'</p>' 


^rr. /. .f. 社 ? .. 於 .• 十 • I ). .十 




叫 .. 十 .. " 广 : . 十 … 


w'ov-c ri L j . » / ，， 

coM by+..</?> A 
v-cly>y\^ ov\ *tVic 

Pa*tc objc^-t *to 
-format 



EaA pictc o( -the daie is 

c^imadtcd -Pvorw -the Daic 
objcd-t by methods. 


TV^c W03 date displayed 

•IS y\ow ^US-torn buiH ： m 七 Vie 

tm/WN 州 七 . 


Pates make sorting easy 


Now that the blog dates have been successfully converted to Date 
objects, which are much more suited to sorting than strings, it’s time to 
revisit the blog order. The problem is that the blog entries are currently 
displayed in the same order that they are stored in the blog array, 
which isn’t necessarily chronological. Most blogs are displayed in reverse 
chronological order, where the most recent posts appear first in the list of 
blog entries. Knowing this, it’s possible to revisit the original blog sorting 
strategy: 


Date 


Loop through the blog array. 

❻ 




Wow wc have Date 


-to other. 


Compare the Date object within each Blog object to the next one. 


Date 




If the date of the next blog entry is more recent than the current entry, swap the entries. 


Although the date comparison part of this strategy certainly looks much 
less daunting with the help of the Date object, the rest of the plan still 
involves a fair amount of custom coding. Sorting a sequence of data sure 
does seem like a common programming problem that has been solved 
many times before. You hate to reinvent the wheel... 
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bringing data to life 



V 


Wouldnt it be dreamy if JavaScript 
had some kind of built-in sort 
feature that took the drudgery out 
of sorting a sequence of data? 
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sort it out amongst yourselves 


Arrays as objects 


Gould it be that an array is capable of sorting itself? If a date knows 
how to turn itself into a string, it’s not so far-fetched to think that an 
array might be able to sort itself. For that to be possible, however, an 
array would have to be an object so that the sorting could take place in a 
method. And indeed it is. Remember this code from the Mandango script? 


for (var i 


0 ; 


< seats.length; i++) 



TV^c sca-b vav'»ablc 
is av^ avva7* 



An 


array 


really just 
an otjecti 


: tells you \ 
clcrwChts a\rc ih the 


hoy/ 
a\r\ray. 


So the cat’s out of the bag, arrays are objects, but does that mean they can 
sort themselves? Not only do arrays have properties such as length, but 
they also have methods that act on the array data, bringing it to life. And 
yes, there’s a method named sort () that sorts the data in an array. Let’s 
see how it works: 


nums 



av-v-ay 

y>UwlDCV-S. "^ 

var nums = [ 51, 11, 34, 29, 17, 46, 22, 58, 16 ]; 


Sorts the array 
^ ih 

o^-dev-. 


The sort () method changes the order of the elements inside the array. 
The default sorting behavior is in increasing order, so the nums array 
turns into this: 
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bringing data to life 


Custom sorting m array 


The default behavior of the Array object’s sort () method is often not 
enough. The good news is that the sorting behavior is determined by a 
comparison function that sort () calls to handle the comparison of 
each sorted item in an array. You can fine-tune the sort order by providing 
your own version of this comparison function. Here’s an example of what 
the function typically looks like: 


function compare(x. 


return x - 



TVic *Uo arc i^o 

array rtems arc 
Compared -for purposes. 


The v-ctuv-h value detev-mihes 
whe-their X avyd y siay wheve 
they av-c ih -the av-v-ay ov- y 
sorted d\\tdid o-r %. 


The return value of the compare () function is a number that 
determines the resulting sort order of x as compared to y. 



Sortx 


<0 

ahead of y- 


Don’t sort — leave 
x and y as they are. 


— >0 

Sort y ahead of x. 




rpen your pencil 


Your custom compare () function is injected into the array sorting 
equation when you call the sort () method — just pass a reference to the 
compare () function into the method. 

TV av-v-ay sort 扒 o>w 

t 。 士 。 lied h 如 tusW 

+uy\6*t'ioy\ 


Write the code for a custom comparison function named 
compare () that sorts YouCube blog array entries in reverse 
chronological order (most recent first). Hint: Blog objects can be 
subtracted from each other by simply using a minus sign. 
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sharpen solution 


^harpen your pencil 

Sobtion 


Write the code for a custom comparison function named 
compare () that sorts YouCube blog array entries in reverse 
chronological order (most recent first). Hint: Blog objects can be 
subtracted from each other by simply using a minus sign. 



These "two 
av-gur^ch-ts av-c 
Blog 

sih 乙 e -the avv-ay 

^Oh-taihS Blog 
objedts. 


W.oj2.) { 


|rc*tu\r)r\ blo^Z da-tc - bjojl .da*tc ； 




Sub 七 v*a 出％ * ivs*t date 
h\t stco^d results ’rn a 

vcvcv*sc tWo^oIsov*t. 


I/Vfc ire sub'tvad'tihg -fclic £y/o dates 

as hur^bcv-s (rwiIlis 杜 Ohds). 


Sorting made simple with fuwctiow literals 

When you think about the role of the array sort comparison function, it’s really 
only used by the sort () method and nothing else. Since it is never called by 
any of the YouCube script code, there’s really no reason for it to be a named 
function. 


Remember function literals from the thermostat in Chapter 6? The 
compare () function is an excellent candidate for a function literal because 
of how it is used. In fact, YouCube blog sorting can be simplified by converting 
the compare () function into a function literal that’s passed directly into the 
sort () method. 




blog•sort(function(blogl, blog2) 


The -fuh^tioh literal is 

passed divcfitly i h -to 
針 ay soirtO method. 


return blog2.date - blogl.date; 

})； 


As a devout puzzler, Ruby is all about efficiency. And in this case that 
equates to eliminating an unnecessary named function that is really just a 
sidekick of the sort () method. Ruby is so bent on efficiency, in fact, that 
she doesn’t see why the comparison function needs to take up three lines 
of code. Although the organization of JavaScript code doesn’t make the 
code run any differently, in this case the function literal is simple enough 
that it makes some sense shrinking it to a single line of code. 


丁 he -Puh^-tioh litcv-al 
is (Uruhdhcd ih-to a 
single lihC o( dodc- 


blog•sort(function(blogl, blog2) { return blog2.date - blogl.date; }); 
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bringing data to life 


Does every object have a 

toString () method? 

Yes. Even if you create a custom 
object and don’t give it a toString () 
method, JavaScript will at least report that it 
is an object if you use it in a context where 
a string is expected. Granted, the string 
won’t be very meaningful but it’s up to you 
to provide a toString () method for 
custom objects if you want it to convey 
meaning about the object. 



How does the sort comparison 
work between Date objects? 

The goal of a sort comparison function 
is to return a number whose value controls 
the sorting of the two arguments. In the 
case of comparing dates, you want the more 
recent date to be sorted first. The more 
recent date is the larger date, so subtracting 
the second date from the first date achieves 
the result of sorting recent dates ahead of 
later dates. This means the second date is 
sorted above the first date only if the second 
date is larger (the result is greater than 0). 


How does the Array. sort () 
method know to use a custom 
comparison function or a default 
comparison? 

This decision is made based upon 
whether or not an argument is passed 
into the sort () function. If there is no 
argument, a default sort comparison is 
assumed. If an argument is provided, it is 
interpreted as a function reference and used 
as the basis for comparing items in the sort. 
So the comparison function reference is an 
optional argument. 


Ruby and her cubes are happy 


The YouGube blog is now approaching Ruby’s vision of a cube puzzle 
blog that shares her every cubist thought with the universe. 



^ YouCubc ■* The - Blog for Cubt s 

YuiiCiibL- - Thf Bloe For Cube Puwkrs 


S/ 21 / 2 幌 


Yikes! TtiMonc couLdbc a beast- 


Pound a 7x7s7 cube for sak o 


⑽奶 ⑽ 8 


izubt; hut iil LisuT^- .niV I'm huraJ and 咖 ippinj^ir a nuw i ； i 亂 


SsilvwL Ihu til- w 


S/lb/2008 


Managed to get a headache toilinf over tirac new cube. Cotta nap 




fjot iIil' new cube 1 onk^nNJ. It's si pctirL 


Rihnw All fling rnrn?^ 


Ouru 


The dates av-c 

ar>d dc 如 . 


"tv-ics 
扣 c ov-dcv-cd mos-t 
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a word search puzzle 


Searching would be nice 

YouGube is running pretty smoothly but several users have requested a 
search feature that allows them to search all of the blog posts. Since Ruby 
plans on eventually having lots of blog posts, she agrees that this could be 
a very handy feature, especially over the long haul. 


Search the Blog ||7x7x7 

oncVicU 



A search feature would 
allow users to search through 
all of my blog posts just by 
entering a search term. 


O 


o 
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Ruby just needs a plan for how to code the search feature 
in YouGube...could objects possibly be involved? 
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bringing data to life 


Searching the blog array 

A search feature for YouGube involves looping through each entry in the 
blog array looking for matching text in each blog post. 


Search the BtogJ|7x7x7 


Get search text from user. 



Loop through 
blog entries. 



there’s a match. 




This design makes a lot of sense but how in 
the world do I search for text in a blog entry? 
I’m perplexed...but I know theres a way! 


O 


o 




How could you go about searching YouCube 
blog entries for a matching string of text? 
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stringing it together 


We already know that a string is really 
an object. So is it possible that string 
could just search itself? 



A string is a searchable object. 

You’re maybe starting to figure out that objects are 
everywhere in JavaScript. Strings are objects, and 
include lots of handy methods for interacting with string 
data (text). And yes, one of these methods allows you to 
search for a piece of text within a string. A string within 
a string is sometimes referred to as a substring. 




L dexOf 0 
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charAt() 
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Cor^vcvt 七 he 
bo lov/cv-dasc or 
uppcvdasc. 
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bringing data to life 


Searching within strings: indexOfO 


The indexOf () method allows you to search for a string of text, a 
substring, within a String object. The substring is passed as an 
argument to the indexOf () method — since you call the method on a 
String object, there’s no need to pass anything else. The indexOf () 
method returns the index where the substring is located, or -1 if there is 
no match. 


var str = "Got the new cube 工 ordered. It's a real pearl."; 



To understand where the number 8 comes from in this example, you have 
to look at a string very much like it’s an array of individual characters. 



20 30 

I I I I I I I I I I I I I 

l n Got the new cube I ordered. It's 

The scavdh s-fcv-ihft ” hew” appears 

at ^ 如 A PP 

When indexOf () is used to search for a string that doesn’t exist, the 
result of the method is -1. 




10 
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var 
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Below is one of Ruby’s favorite riddles. Identify the index of each occurrence of the substring 
cube" in the riddle string. 


"A cubist cubed two cubes and ended up with eight. Was she Cuban? 
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exercise solution 



E 抑 RdS€ 
SoLs/tiOH 


Below is one of Ruby’s favorite riddles. Identify the index of each occurrence of the substring 

in tho rirlHIa ctrinn 



cube 11 in the riddle string 

丁 he bc^ihhih^ o-p "the 
stirihg has ihdex of O. 


A cubist cubed two cubes and ended up 



T\\t substv'm^ 



"Hie subs-( ： irih( 
•^dex is I 6 ). 、 


Searching the blog array 

String searching isn’t too difficult thanks to the indexOf () method of 
the String object, but Ruby still has an entire blog to search. Her plan 
is to loop through the array of blog entries, and use the indexOf () 
method to search for a substring within the body text of each blog entry. 
If there is a match, she wants to display the blog entry in an alert box. 

Before writing a function to handle the actual blog search, the YouGube 
blog needs a text field for the search text, as well as a button for initiating 
a search. 


<input type="button" id="search" value= M Search the Blog" onclick= M searchBlog(); n / > 


<input type= n text" id="searchtext" name= n searchtext" value: 


/> 


Bloj scav"C.K *bc%*b »s 

七 Ivrou# 1^* 


Scav-dK 


The Sca\rdh but-toh dal Is 
■to -the blog. 


Search the BlogJ [7x7x7 



With the HTML search elements in place, all that’s left is to put together 
the code for the searchBlog () function. Since the function uses 
an alert to display the search results, there’s no need to return any 
information from it. There also isn’t any need for an argument since the 
function directly reads the search text from the HTML text field. 
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bringing data to life 


I^ 


JavaScript Magnets 


The YouCube searchBlog () function is responsible for looping 
through the array of blog entries and searching for matching text 
in a blog body. Help Ruby finish the function by filling in missing 
code with the magnets. Hint: The matching search result should be 
displayed with its date in the form MM/DD/YYYY inside of square 
brackets, followed by the blog body text. 


function searchBlog () { 

=document.getElementByld( n 


var 


< 


i++) 


).value 


for (var i = 0; 

// See if the blog entry contains the search text 

•toLowerCaseO .indexOf(searchText.toLowerCase()) 

) + '▼/'▼ + 


- 1 ) 


if (blog[i]. 

alert (，▼ [ n + (blog[i]. 
blog [i] .date.getDate () 

blog[i]. )’ 

break; 


+ 


+ blog[i]• 


.getFullYear() 


// 


If the search text wasn’t found, display a message 


if (i 


alert("Sorry, there are no blog entries 


containing the search text•) 





I date I 
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JavaScript magnets solution 



JavaScript Magnets Solution 

The YouCube searchBlog () function is responsible for looping 
through the array of blog entries and searching for matching text 
in a blog body. Help Ruby finish the function by filling in missing 
code with the magnets. Hint: The matching search result should be 
displayed with its date in the form MM/DD/YYYY \ns\de of square 
brackets, followed by the blog body text. 


Pnrst amab -the Starts 
text -hrom -the ttT/WL 
text -field. 


function searchBlog () { 

E ； 


: hText 


for (var i 




II See if the 


the search text 


— 

document•getElementByld(' 

| searchtext 

” 





).value; 


if (blog[i] I bo^J IcLowerCas^ndexOf (searchText^toLowerCase ()) 

- 


alert ▼ 


date 


blog [i] . date . getDat^^ 
blog[i]. 


I getMonth() 





/ 


break; 


body 


getFullYear() 


- 1 ) 


// 


If the search text wasn’t found, display a message 



: re arc 


I no blog entries 


containing the search text.’ ） 


l*f i equals ihc bloj I ⑶ jth, ii 
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bringing data to life 


Searching works wow, too! 

YouGube 2.0 is now complete with a search feature that relies heavily on 
the search capabilities built into the String object. It’s a great example 
of how objects make data active, in this case turning a string of text (pure 
data) into an entity that has a behavior (it can search itself). And perhaps 
more importantly, it kept Ruby from having to invent her own search 
routine, allowing her to focus on writing her blog. 



B 0 n 伽一 rs 

YoyCylH! - llnu ^ Cubt- 




cubers to discuss 


MeE up w^th siainw ffllor# cubers 
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Search the fflog 
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Ruby is thrilled with the new blog feature, but she’s not one to 
rest on her laurels. She already has YouGube 3.0 in mind... 
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really, none of them are dumb 


I still don’t quite understand how 
every string is really an object. Is that 
really true? 

Yes. Every single string in JavaScript 
is an object. If you put your name in quotes 
in JavaScript code, as in "Ruby", you 
just created an object. Although it may seem 
like overkill, the upside to JavaScript treating 
every string as an object is that every string 
has the ability to do useful things such as 
know its own length, search for substrings 
within itself, and so forth. 

So I get that a string is an object, 
but it also seems to be a lot like an array 
with the character indexes and all. Is a 
string also an array? 

No. A string is most definitely not an 
array. However, it is true that many of the 
String methods operate on string data 
as if it was an array of individual characters. 
For example, the characters within a string 
start at index 0 and count up a character at 
a time as you move through the string. But 
you can’t access a character within a string 
using square brackets ([ ]), as you can with 
an array. So while it does help to think of the 
characters within a string as being similar to 
elements in an array, you don’t literally work 
with a String object the same way you 
work with an Array object. 



Could the searchBlog () 

function have used charAt () instead 
of indexOf ( ) for the blog search? 

No. The charAt () method only 
searches for a single character, which 
wouldn't be very helpful in searching the 
blog for a phrase of text. The indexOf () 
method searches for a string, not just a 
single character, and is the best tool for the 
job in this case. 

Is it possible to search a string for 
more than one occurrence of a search 
substring? 

Yes. The indexOf () method 
defaults to searching for the first occurrence 
of the search substring. But you can pass 
in a second, optional argument that tells 
indexOf () where to start the search. 

So let’s say you're searching for the string 
“cube” and you've found a match at index 
11. You can call indexOf ( ) again with 
a second argument of 11, which forces it to 
start searching at index 12. So the general 
solution is to pass the previous search index 
into the indexOf () method to continue 
searching throughout a string. 


What’s the purpose of the two 
calls to toLowerCase () in the 
searchBlog () function? 

Great question! The answer has to do 
with the problem of case when searching 
for text in the blog. If someone searches the 
blog for the word “cube”, they probably want 
all matches for the word, including "cube", 
“Cube” ， “CUBE”，and any other variations in 
the case of the word. A simple way to get 
around this problem is to convert both the 
search substring and the blog body text 
to a common case before carrying out the 
search. Although the searchBlog () 
function uses toLowerCase (), the 
toUpperCase () method would work 
just as well. The point is to remove case 
from the search entirely. 



^^^BUILET POINTS - 

■ The tostring () method is used to convert any 
object to a text representation. 

■ Arrays and strings are both really just objects, relying 
on the standard Array and string objects in 
JavaScript for their methods and data storage. 


The sort () method of the Array object can be 
used to sort an array in any order you want. 

The indexOf () method in the string object 
searches for a string of text within another string, 
returning the index of the search string location. 
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bringing data to life 


A random YouCubc 


In the neverending quest to keep users interested in her blog, Ruby has 
come up with one more addition to YouGube that she thinks her fellow 
puzzlers will enjoy. She wants to add a Random button that allows visitors 
to view a blog entry at random. 


Ruby, ^ubc puzzle 
bloggcv- ar>d wo^ah 
of rwystc\ry. 






How could you go about choosing a 
YouCube blog entry at random? 
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everything has its place 


The Math object is m organizational object 


To help Ruby add a random feature to YouCube，we desperately need a 
way to generate random numbers. This involves using a built-in JavaScript 
object that isn’t quite as “alive” as some of the other objects we’ve used. 
The standard Math object is where random numbers can be generated, 
and it is a unique object in that it doesn’t have any data that changes, and 
no methods that act on internal data. 





R ⑽ d a -floatmj fomt 

bcv- bo 3^ 'mtcyv-. 


Rouhd B -Ploatihg 
humbcv VOW^I 

"fco dh ihtcgcv*. 
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丁 he 

^OhS-tah-t ； 午 . 


V"3hdorr» hurwbcV" 
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The Math object is an organizational object, which means it is just 
a collection of math-related utility methods and constants. There are no 
variables, which means the Math object maintains no state — you can’t use 
it to store anything. The only data it contains are a few constants such as 
PI (3.14). The methods in the Math object, however, are quite handy. For 
one, the random () method generates a random floating point number 
between 0 and 1. 


Tke Matk object is 
an organizational 
object tkat kouses 
matk metkocts and 


constants. 


Write the results of the following calls to Math methods. 

Math.round(Math.PI) . 

Math.ceil(Math.PI) . 

Math.random() . 

- ► i^swers on pa^e 436. 
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bringing data to life 



The Math Object 

This week’s interview: 

When math functions collide 


Head First： OK, I’m really confused. You’re an 
object, but I’m hearing that you don’t really do 
anything other than hold a bunch of mathematical 
methods and a few constants. I thought the whole 
point of objects was to make data active. You know, 
wrap up some data and then have methods that do 
cool things with it. 

Math： That’s what conventional JavaScript wisdom 
leads people to think, but not all objects are about 
bringing data to life. It’s perfectly acceptable for an 
object to play the role of organizer, like me. 

Head First： But couldn’t all those math methods 
have just been created as standard functions? 

Math： Yes, they could’ve, but you’re forgetting that 
the JavaScript language is built out of objects. So in 
reality, there’s no such thing as a “standard” function. 

Head First: But I can create a function outside of 
an object and it seems to work just fine. 

Math: Right, but in reality all functions really 
are methods because they belong to an object 
somewhere, even if it’s hidden. This helps explain 
why there are no “standard functions.’’ 

Head First： Ah, I see. It’s starting to make more 
sense why you contain those math methods. 

Math： And don’t forget that just because I don’t have 
internal data that gets manipulated by my methods, 
it doesn’t mean I don’t play an important role in 
being an object. 

Head First： What do you mean? 

Math: Well, imagine a group of people who all share 
a common interest, such as cube puzzles. In many 
cases, such people organize together so that they can 
interact with each other about their interest. While 
math methods aren’t exactly as social as people, they 
do benefit from the organization I provide. 


Head First： You mean because they’re all related to 
a common interest. 

Math： Yes! And that interest is carrying out 
mathematical tasks, such as rounding numbers, 
carrying out trigonometric operations, and 
generating random numbers. 

Head First： You mention generating random 
numbers. I’ve heard your numbers aren’t truly 
random. Any truth to the rumor? 

Math： I have to confess that no, they are not truly 
random. And neither are most computer-generated 
random numbers. My random numbers are 
“pseudorandom，” which is good enough for most 
situations. 

Head First： Pseudorandom, is that like 
pseudo-science...or pseudocode? 

Math: Uh, no and yes. No, nothing at all like 
pseudo-science. And yes, a little like pseudocode 
since pseudocode is intended to represent the idea 
behind code without actually being code. In the 
case of pseudorandom numbers, they approximate 
randomness without truly being random. 

Head First: So, can I trust that pseudorandom 
numbers are sufficiently random for most JavaScript 
applications? 

Math： Yes, and that’s a good way to put it: 
“sufficiently random.” You probably wouldn’t want 
to trust pseudorandom numbers for issues involving 
national security, but they work great for injecting 
randomness into everyday scripts. 

Head First： Got it. Well, thanks for your time...and 
your honesty regarding random numbers. 

Math： Glad to do it...you know I can’t lie. 
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exercise solution 


Write the results of the following calls to Math methods. 

~v 竹 ⑽ Cl 

Math, round (Math. PI) $. ) 

Math.ceil(Math.PI) . 十 . 

小 ？ Sov-v-v, i*t >was a 

Math, random() I . • ..… 、 ^cshoJ Vou 

- J he 


ftewerate random numbers with Math.rawdom 

Pseudorandom or not, random numbers generated by the random () method of 
the Math object are extremely useful in applications such as YouGube that need 
to make a random selection from a collection of data. The problem is, random () 
returns a random number in the range 0 and 1, while Ruby needs a random number 
that is in the range 0 to the end of blog array. In other words, she needs to genera^ 
a random blog index. 


Bsdh o-f -the \r3hdom 
K>unr»bc\rs is ih the 
O {o i 


alert(Math.random()); 


alert(Math.random()); 
alert (Math.random()); 


To generate a random number within a range other than 0 to 1, you have 
to lean on the Math object a little more and use another method. The 
floor () method rounds a number down to the nearest integer, and is 
perfect for generating random integers within a given range of integers. 





m 


% 


9 

/ 


o - ^ 


var oneToSix = Math.floor(Math.random() * 6) 
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bringing data to life 


Why isn’t it necessary to create a 
Math object before using it? 

Ah, that’s a perceptive question, and it 
touches on a very important concept related 
to objects. Since the Math object doesn't 
actually contain data that can change, also 
known as instance data, there is no need to 
create an object. Remember that the Math 
object is just a collection of static methods 
and constants, so everything that goes into 
the Math object already exists—there’s 
nothing to create. This will make much more 
sense in Chapter 10 when you learn the 
details of object instances and classes. 

Q/ What’s the difference between the 

round () and floor () methods of 
the Math object? 



The round () method rounds 
the number up or down depending upon 
its decimal part. For example, Math. 
round (11.375) results in 11, while 
Math. round (11.625) results 
in 12. The floor () method, on other 
hand, always rounds down, no matter what 
the decimal part is. You can just think of the 
floor () method as always chopping off 
the decimal part. 


What else can the Math object 
do? 

Lots of things. Two handy methods 
that we haven't had the need for yet are 
min () and max (), which analyze two 
numbers and return the lesser or greater 
of the two. abs () is another very useful 
Math method—its job is to return a positive 
number no matter what number you give it. 


u 


Gee} BifS 


If you find yourself working on a JavaScript 
application that desperately needs true random 
numbers, stop by http://random.org to learn more about 
how to go beyond the realm of pseudorandom numbers. 



rpen your pencil 


Write the code for a randomBlog () function that selects a 
blog entry at random and then displays it in an alert box. Hint: 
The blog entry in the alert box can be formatted the same as the 
search result in searchBlog (). 
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sharpen solution 


(^Jterpen your pencil 

Solution 



Use a \rar\dom ^umbcv 
•to scl^t a blo^ cr^tv-y. 




Write the code for a randomBlog () function that selects a 
blog entry at random and then displays it in an alert box. Hint: 
The blog entry in the alert box can be formatted the same as the 
search result in searchBlog (). 

d \rdhdom humbe\r between 
o av\d Ohc less -thah -the blog Ic^g-th. 


// Pidk B ^umbev* bc*twcc 灼 0 bloj lc^0|*tK — 

vav- i — /l/Iath-floo\r(A1a*th v-a^domO ^ 




ale\rt(”r’ + (blojCi3.da*tcjc*tA1o^*thO + I) + V w + blojCi3da*tc-5c*tDa*tcO 
blogti3 da*tc-5c*tFullYcav-0 + w + blogCi3.body); 


))p 、 


} 


Fovma*t blo^ c^*tvy v/'i*tK a MM/PP/WW 
da-tc -folloy/cd by body *tc%*t* 



Random but still lacking 


Ruby’s blog now supports a random blog search feature, which she is very 
happy about. Users can now view the YouGube blog with a healthy sense 
of intrigue since they don’t know what entry they’ll get. 


fcjcliry.s- 


lofaTxTsTcutK.M'wcd 


R^hdon\ly £，hosch 
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Even with the excitement over the new 
blog feature, Ruby has a nagging feeling 
that something is still amiss with YouGube. 
Her Blog “object” is currently just a 
couple of properties that rely on a bunch 
of separate functions. That doesn’t seem 
like a very good object design... 
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bringing data to life 


An object m search of actions 

Ruby’s instincts about the YouGube object are dead-on. The behavioral 
part of the object is extremely lacking, and could use some serious 
restructuring so that it uses methods to handle blog-specific tasks. Ruby 
needs methods that add some actions to the Blog object! 

rpen your pencil_ 




Study the YouCube code and circle any code you think could be 
placed within Blog methods; make sure to name each method. 


function showBlog(numEntries) { 

// First sort the blog in reverse chronological order (most recent first) 
blog.sort(function(blogl, blog2) { return blog2.date - blogl.date; }); 


// Adjust the number of entries to show the full blog, if necessary 
if (!numEntries) 

numEntries = blog.length; 

// Show the blog entries 
var i = 0, blogText =""; 

while (i < blog.length && i < numEntries) { 

// Use a gray background for every other blog entry 
if (i % 2 == 0) 

blogText += "<p style =/ ， background-color : ^EEEEEE^ >"; 
else 

blogText += M <p>"; 

// Generate the formatted blog HTML code 

blogText += "<strong>" + (blog[i].date.getMonth() + 1) + " / " + 
blog[i].date.getDate() + "/" + 

blog[i] . date . getFullYear () + "</strongxbr / >" + 
blog[i].body + M </p>"; 

i++; 


// Set the blog HTML code on the page 

document•getElementByld( n blog n )•innerHTML = blogText; 


function searchBlog() { 

var searchText = document • getElementByld (▼ ， searchtext，'）• value; 
for (var i = 0; i < blog.length; i++) { 

// See if the blog entry contains the search text 

if (blog[i].body.toLowerCase().indexOf(searchText.toLowerCase()) != -1) { 

alert ("[" + (blog[i] •date•getMonth() + 1) + "/" + blog[i] .date.getDate() + "/" + 
blog[i].date.getFullYear() + "] " + blog[i].body); 

break; 


// If the search text wasn't found, display a message 
if (i == blog.length) 

alert("Sorry, there are no blog entries containing the search text."); 


function randomBlog() { 

// Pick a random number between 0 and blog.length - 1 
var i = Math.floor(Math.random() * blog.length); 

alert ("[" + (blog[i] .date.getMonth() + 1) + "/" + blog[i] .date.getDate() + "/" + 
blog[i].date.getFullYear() + "] " + blog[i].body); 
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sharpen solution 



Study the YouCube code and circle any code you think could be 
placed within Blog methods; make sure to name each method. 


function showBlog(numEntries) { 

// First sort the blog in reverse chronological order (most recent first) 
blog•sort(function(blogl, blog2) { return blog2.date - blogl.date; }); 


// Adjust the number of entries to show the full blog, if necessary 
if (!numEntries) 

numEntries = blog.length; 


// Show the blog entries 
var i = 0, blogText =""; 

while (i < blog.length && i < numEntries) 


Cohvcirt the blog ch-t^y 
■to ttTTVJL 

- Blog.-tottT/WLO. 


a gray Dackground ror every orner biog entry 
: (i % 2 == 0) 

blogText += "<p style =/ ， background-color : ^EEEEEE^ > 
else 

blogText += "<p> n ; 

// Generate the formatted blog HTML code 
[blogText += "<strong> n + (blog[i].date.getMonth() 
blog[i].date.getDate() + "/" + 

blog[i] . date . getFullYear () + "</strongxbr / >" - 
blog[i].body + "</p>"; 



i++; 


// Set the blog HTML code on the page 

document.getElementByld( n blog n )•innerHTML = blogText; 


function searchBlog() { 

var searchText = document • getElementByld (▼ ， searchtext，'）• value; 
for (var i = 0; i < blog.length; i++) { 

/ / i f hi ng rv r.on t a i n .q t.he sea rch text._ 

if (blog[i].body.toLowerCase().indexOf(searchText.toLowerCase()) != -1) 

afS &-("[" 甲 " (D 丄 og Lir. daL^ . LMOIlUi () + V) T — fr T m 十 DiogLiJ . date . getDate {) + ~ 
^blog[i] . date . getFullYear () + " ] " + blog [i] .body); 

break ； - - - 


// If the search text wasn't found, display a message 
if (i == blog.length) 

alert("Sorry, there are no blog entries containing the search text .")； 


function randomBlog() { 

// Pick a random number between 0 and blog.length - 1 
var i = Math.floor(Math.random() * blog.length); 

alert (" [" + (blog [i] . date . getMonth () +1) +'，/，'+ blog [i] . date . getDate () + " / " + 
blog[i]•date•getFullYear() + "] " + blog[i].body); 


Blo 9 .-toHTML0 

a blog Ch-tv^y -to 
jollied ftT/WL 6odc, whi 乩 
a — bu^dch M o( 
otheir todt -tha-t wahts -to 

dis P la Y a 士如 ly bailed blog. 


Ko*t CoAt but still v/ortW/ 

op a method smte a blo^ 

should be capable 
•rts body *fov* 七亡乂七 . 


Blog.-fcoS-tv-ihgO 

Cohvc\rt a blog ch-tv-y io a 

whidh makes schsc -fco use 
lh 3h y sitwtioh whc\rc the date 
is shovm ih s^ua\rc bv-adkets with 
the body text beside it 
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theteicire no bringing data to life 

Dumb Questi9ns 


How do you know what script code 
should go into a method? 

Well, you have to first remind yourself 
what a method is ideally intended to do, and 
that is to take some kind of action based 
upon the state (data) of an object. To some 
extent, figuring out methods for an object 
involves figuring out what it is the object is 
exactly doing, or needs to do. Then focus 
on empowering objects to do things for 


As an example, it makes sense for the 
Blog object to turn itself into a string 
or formatted HTML code since those two 
actions require access to internal blog data. 
Similarly, searching for text within a blog 
entry is an action that should be internal 
to the Blog object, and therefore makes 
perfect sense as a method. 

So is there an example of an action 
that the Blog object shouldn’t take? 


Actions that are very much outside 
of the scope of the Blog object could 
be things like showing or searching the 
list of blog entries. This is because the 
Blog object represents a single blog 
entry. That’s why the blog array consists 
of multiple individual Blog objects. So 
each individual Blog object doesn't need 
to concern itself with a collection of Blog 
objects. Instead, an individual Blog object 
should take care of its own business, which 
involves taking action based solely upon its 
own date and body text. 


themselves. 


Turn a fuwctiow into a method 


Now that some pieces of YouGube code have been isolated that would 
make a good fit as methods of the Blog object, let’s take a closer 
look at converting one of them into a Blog method. The method is 
containsText (), which takes on the responsibility of searching the 
body of a blog entry for a substring. Moving the search code to a method 
primarily involves operating directly on the body property of a Blog 
object, as opposed to a local variable in the searchBlog () function. 
These steps help clarify the process: 

o Declare the method, complete with an argument 
list, if required, such as the search text argument 
to containsText (). 

❻ Move the existing code to the new method. 

❺ Change relevant code to use object properties, such 
as this . body in the containsText () method. 


r^l^rpen your penci 


Blog 



Write the code for the Blog object’s containsText () 
method, which is created in the Blog () constructor by 
assigning a function literal to this . containsText. 


you are here ► 
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presto change-o 


(^iterpen your pencil 

Solution 

TKc mc*t^od »S seated \>^i 
dssi^m^ d -fuir\t*btoy\ l»*tcv*3l 

-to a w»c*t^od v-c-fcv-cy\tc. 


Write the code for the Blog object’s containsText () 
method, which is created in the Blog () constructor by 
assigning a function literal to this . containsText. 



*this do^*ta'msTcx.*t — { 



\rc*tu\r^ (-this.bodiy.-fcoLoy/cv-CascO/mdlc^O-ff'tc^t'toLoy/cv-CdscO) —I )； 



The keyword is used io ^caie a r^thod ' 丁 ^ 匕， T'^'n ^ 七 hod Besses 如 objc^ 

sir^ila^ly io how it is used io y^hes. ^ thc this ke Y word . 


Unveilmg the shiny new blog object 

The other two new blog methods join the containsText () method in 
a new version of the Blog object that has both properties and behaviors. 



function Blog(body, date) 

// Assign the properties 
this.body = body; 
this.date = date; 


Cvca-tc ^opcvtics. 


0 


]~ hc ^Hk > 9 0 method 

this.aate = uauc, 吁 C blo 3 civbry (o^aii c d as a 

// Return a string representation of the blog entry / ^^9 ^ ^ 
比 ==^^ 9 + = (===) 々二。咖 (） + ” + :/: + ^is. date. getDateO + V" + 

this.date.getFullYear() + ] + this.body’ 丁 ^ -(^(^T/VILO method 

}; v-c*tuv-^s i\\t blo^ c^-tv-y 

// Return a formatted HTML representation of the blog entry ^ 

th ^ / - ^eT g ； a?b ： cSr^nf asTL^hUghtspec.f.ed HTML ,ode- 

blogHTMf ^'highlight ? "<P style-bac kg round-color:#EEEEEE^>" : -P >"； 

/ / Generate the formatted blog HTML code , , + »/.. + 

bl this M da + t；. 2 tDate O " + + " hfstdfte . getFullYear () + "</strong><br />" + 

return'b?ogH™L ; /P>，，； ^od ，eW 

}； K 七 … ^ body text ^oh-taihs the 

// See if the blog body contains a string of text 兄⑽ “ 七 ― 饮兄 otkwi% 

thl r :;=t=S X L: 二 .UxOf(text.toLowerCaseO) != -D ； 


442 Chapter 9 










bringing data to life 


What do objects really offer YouCube? 

It’s not until the new version of the Blog object (available at http://www. 
headfirstlabs.com/books/hjjs/) is plugged into the You Cube script that the 
real benefits of object-oriented programming are revealed. Now that 
several important blog-specific tasks are delegated to Blog methods, the 
script code gets considerably simpler. 


Tke new Blogf 
object simpliiies tke 
YouCute script. 


// Show the list of blog entries 
function showBlog(numEntries) { 

// First sort the blog in reverse chronological order (most recent first) 
blog•sort(function(blogl, blog2) { return blog2.date - blogl.date; }); 


// Adjust the number of entries to show the full blog, if necessary 
if (!numEntries) 

numEntries = blog.length; 


// Show the blog entries 
var i = 0, blogListHTML =""; 
while (i < blog.length && i < numEntries) 
blogListHTML += blog[i].toHTML(i % 2 == 
i++; 


0)； 



TV WTMLO »s ⑼七 ㈣ 

vcsfoyvs'iblc -fov a blo^ 

€灼七巧 as HTML todc. 


document•getElementByld( n blog n )•innerHTML = blogListHTML; 


// Search the list of blog entries for a piece of text 
function searchBlog() { 

var searchText = document•getElementByld( n searchtext n )•value; 
for (var i = 0; i < blog.length; i++) { 

// See if the blog entry contains the search text 
if (blog[i].containsText(searchText)) { 

alert (blog[i]); 


break; 



The doh-taihsTcxtO method 
takes of a 

blog Ch-t\ry -fo\r a subst—. 

mc-tViod IS a little move 

sub*tlc» ybt” ^llcd au-tow'at^all'/ 
a blo^ used m a cov\tc%t 


// If the search text wasn't found, display a message 
if (i == blog.length) 

alert("Sorry, there are no blog entries containing the search text.") 


// Display a randomly chosen blog entry 
function randomBlog() { 

// Pick a random number between 0 and blog.length - 1 
var i = Math.floor(Math.random() * blog.length); 

alert(blog[i]); 

} 


you are here ► 
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ready for greatness 


YouCube ?.0! 


It’s been quite a project but Ruby has officially deemed YouCube 3.0 good 
enough for her to take a break and get back to puzzling. She’s also excited 
about spending some time preparing for that party she was invited to... 



TV W 十 sorted and 

_ I _I i. ，丄丄廣 m 




blo^ be 
seavAed... 


^ ..^ 7 -—^ 

YouCube ： Th. Blog for Cube Puzzlers 


[S/3^/3008] Mi l up with ■■□mu. [pIIbiw t LHdivciJV. 

a 7s7s 7 cuIm. Mixed fMlin^s. 


Search tht Blc^ 


娜础 ㈣ ⑽“娜舭 pfiftpKl 0 

fcssUnp.K- 

cube for sale oa^Yiy 


fa 7x7x7 cube. Mixed 


: he blog c^y\ be 
twed v-a^domly... 


eaM 賴 

Salved the nuw w 


■be but yfwjura ：， 




|8/lG/2QHDei Wan-aged E:o get a headacht tDilmg over the 
cube. CetU nap. 


Who knew Blog 
object would be my 
favorite puzzle? 


View 


GolthClieV 

All fllofl ^njriES 


Blog 


^V\ks -to a dus-tom 

objed died Blog/ 


toStringO 


body 


ith 


so 


p w 

)W i 


cuber 


ello 


the 


discuss 


toHTML() 


o 


prospGct___ 


date 


gust 14th ， 


containsText() 
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bringing data to life 



JavaScriptcross 

Ruby has been waiting all chapter for this...a puzzle! 
But it’s not a cube puzzle, it’s a crossword puzzle. Oh 
well, you can’t have it all. 



Across 

I. Use this String method to search for a string of text. 

4. When you place a function in an object, it becomes a 
6. JavaScript arrays and strings are really. 

8. Use this to access a member of an object. 

II. Nearly random. 

13. This method converts any object into a string of text. 

14. Ruby's hometown. 


Down 

2. Use this object to work with time. 

3. A Math method that rounds down a number. 

5. In an object, properties store this. 

7. Object properties are created here. 

9. A piece of data in an object. 

10. Methods allow objects to take these. 

12. Call this method to change the order of the items in an array. 


you are here ► 
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page goal header 



JavaScPiptcposs Solution 
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bringing data to life 



Fol^ the page vertically ^ at can 
to line up the two brains 
and solve the riddle. 



V 嫩 


JavaScript objects cio to tkeir ctata? 


I Vs d mcctmj o( m’mds, <r 




Searck all you want, Wt it’s unlikely tkat 
you’ll lind anytking Letter titan a 
JavaScript otject to do tilings like sort 
and analyze data. TkeyVe even atle to 
ranctomize numters witkout any trouble at all. 
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447 









10 crectting cust9ni objects 



♦ Having It Your Way 
with Custom Objects 


Act now, skip the middle man, 
there's a money-back guarantee, 
it’s only a dollar...if you order now. 
You can have it your way, baby! 


If it was only that easy, we’d surely have it made. JavaScript doesn't 

have a money-back guarantee, but you can definitely have it your way. Custom objects 
are the JavaScript equivalent of a decaf triple shot grande extra hot no whip extra drizzle 
no foam marble mocha macchiato. That is one custom cup of coffee! And with custom 
JavaScript objects, you can brew up some code that does exactly what you want, while 
taking advantage of the benefits of properties and methods. The end result is reusable 
object-oriented code that effectively extends the JavaScript language...just for you! 




this is a new chapter 
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the Blog method: uh-oh! 


Revisiting the YouCube Plog methods 

When we last left Ruby, she was quite excited about having created 
an object-powered blog for writing about her interest in cube puzzles. 
Although Ruby did a decent job of creating the Blog object that drives 
the YouCube blog, she unknowingly missed some key opportunities to 
apply object-oriented principles to YouCube. More importantly, she 
didn’t fully explore the different ways the Blog object can be made more 
efficient, more organized, and therefore more maintainable into the future. 



The last tweak Ruby made to the Bio 
three methods to handle several blog-specitic tasks. 

Blog 


ect involved the creation of 

_ Ti^c la*tcs*t version o-f *thc -files 
be dovmloadcd a 七 http://y/y/w. 
hcad-fi\rs*tlabs.dom/books/h-fjs/. 


Tke YouCute tlog 

works tut it still isn’t 
a sliining teacon 
ol oLject-orientect 
programming design. 


ith so 


up wi 

Fellow cuben 
to discuss the 
prospect..." 

igust 29th, 


toHTML() 


The three Blog methods 
take care of several 
tasks that make sense 
being handled from 
within a blog entry. 


containsText() 


I happen to like 
the Blog methods. 


O 


o 


action Blog(body, date) { 
iAssign the properties 
[s^.body = body; 

Vdate = date; 

turn a string representation of the blog entry 

… + this.date.getDateO 

this.dlte.getFullYearO + "1 " -仙上郝 

// Return a formatted HTML representation of the b lo g entry 

this. toHTML = function(hxghlxght^{ , f ified 

// Use a gray background as a hxghhgn 

var blogHTML = ""； st le ='background-color : #EEEEEE 1 >' 

blogHTML += highlight ? <P st Y le 

this.date.getDateO + / 十 l 

this.body + "</p>" ； 
return blogHTML; 


'<p>' 


// See if the blog body contains a string 


-i) 


The YouCube methods look fine on the surface, 
but there’s a subtle problem... 
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creating custom objects 


Method overload 


Similar to the blog properties, the methods in the Blog object are created 
inside the constructor using the this keyword. This approach works but 
it ends up creating a new copy of the methods for every Blog object that 
is created. So if the blog contains six entries, there are six copies of the 
three Blog methods. 





ntaiosTextO 


Blog 



toString() 


containsText() 


The Blog object inadvertently creates more methods 
than it needs, which is very wasteful and inefficient. 

It’s true, the Blog () constructor creates three methods every time a new 
object is created, which means every Blog object has its own copy of 
each method. Unlike properties, which need to store unique data for each 
different object, methods should be shared between objects. It would 
be a much better design if all Blog objects shared a single copy of each 
method. This prevents the script from getting bloated with unnecessary 
methods as lots of blog entries (objects!) are added over time. 






How could you redesign the Blog object so that the method code doesn’t get duplicated in 
each new object? 


you are here ► 
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now class...in this instance... 


Classes vs. instances 


The duplicate method problem touches on an extremely important 
concept related to JavaScript objects: the difference between an object 
class and an object instance. A class is an object description, a template 
that outlines what an object is made of. An instance is an actual object that 
has been created from a class. In real world terms, a class is the blueprint 
for a house, while an object is the house itself. And similar to JavaScript 
objects, you can build many house instances from a single class (blueprint). 


Object instances 
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creating custom objects 


Instances arc created from classes 

A class describes the properties and methods of an object, while an 
instance puts real data in the properties and brings them to life. Each 
instance gets its own copies of properties, which is what allows instances to 
be uniquely different from one another. 

body 『"Manacred to get a. 

date 

toString I function () { 

toHTML 

containsText 



An otject class is a 
template, wliile an 
object instance is tke 
tiling created from 
tke template. 


Pv-opc\rty values o-p-tch vav-y 
Arom -fco ihs-bhdc, 

so it's \^o^iay\i -that e 把 h 
ihS-ta^c yts i*ts ov/h ^opy. 


P\ropc\rtics. 


^Ic-thods. 



Mc-tV^odis avc uwctcssavilY 
dufl^a*tcdi m o\ 
"these ms*t3y\tcs. j 
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measure twice...cut once 


Access m mstance's properties with "this" 

All the properties we’ve dealt with thus far have been instance 
properties, meaning that they are owned by an instance, and more 
importantly, each instance gets its own copy. You can easily identify an 
instance property because it is set in the constructor using the this 
keyword. 


function Blog(body, date) { 
this, body = body; 
this.date = date ; 

TKcsc arc ^o\>cr*t'»cs 

because arc 



Tke tkis 
keyword is used 
to set properties 
and metkocts 
tkat are ovnect 
W an instance. 


There are also instance methods, but they are a little trickier since they 
can be owned by an instance or by the class. So far we’ve only created 
instance methods that are set using the this keyword, which means they 
are owned by each instance. This explains why the method code is 
duplicated in each instance. 


function Blog(body, date) { 



methods. 





These 3\rc ihs-t^h^c methods 
because the -this keyword is used 
"to set "them ih -the ^ohs-tv-u^-tov. 


} The good news is that custom objects aren’t destined to always waste 

method code by duplicating it in every new instance. The solution is to 
create methods in such a way that the instances all share a common copy 
of the method code. 
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creating custom objects 


Oww once, ruw many: class-owned methods 


There is another kind of instance method that is owned by the class itself, 
which means that there is only one copy shared for all instances. This class- 
owned instance method is much more efficient than storing a copy of a 
method in each and every instance. 


Blog 


T*he method is oWheel 
by the Blog dass, SO 
"the ihs-bh^s doy\ J i 
need theiv owh topics. 


Managed to J toStri ng() 
headache toil! 
over the new 

cube..." I to HTML () 


August 16th，I 


containsText() 



TV^sc msiaues 

data m msta^c 
^vofCV"*t»cs b'A't 七 hc’V" 

七 Ws a 代 autsstd 
^v-ow *tV>c 山 ss . 





When a method is owned by the class, all instances of the class have 
access to it, and therefore don’t have their own copies. This is much 
more efficient, especially when you consider how many method copies 
could end up taking up space in an application that creates lots of 
object instances. In the case of YouGube, three methods (toString (), 
toHTML (), and containsText ()) would be unnecessarily duplicated 
for every blog entry that is created. 

Of course, we still need a mechanism for assigning the ownership of a 
method to the class, as opposed to individual instances... 


Storing a metkoct in a 
class allows all instances 
to skare one copy. 
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inside every object exists... 


Use prototype to work at a class-level 



The body of 
TUh^-fcioh li*tcv-a|. 

Blog 


Glasses in JavaScript are made possible in JavaScript thanks to a hidden 
object called prototype that exists in every object as a property. The 
prototype object allows you to set properties and methods that are owned 
at the class level, as opposed to within an instance. In the case of methods, 
the prototype object is how you establish that a class owns a method. 


In this example, the toHTML () method is added to the Blog class 
itself, as opposed to a specific instance of the class. No matter how many 
instances of the Blog object we create, there is only one copy of the 
toHTML () method. 


Blog 


Since the toHTML () method is now part of the Blog class, when the 
method is called the code that runs is located in the class. However, the 
method is technically still an instance method because it can be called 
through an instance object, and it can access instance properties. 


var blogEntryl = new Blog("Not much going on. 


blogEntryl . toHTML () 


toHTML () 


Blog. prototype . toHTML = function () 


Class 


The p\rotolypc object is 
dressed as d pv-opev-ty 
o( -the dass. 


-The 


If another instance of the Blog object is created and the toHTML () 
method is called on it, the same code in the class gets run. That’s the 
beauty of storing a method in a class — store once, run many! 


var blogEntry2 = new Blog ("Still just hanging around 


blogEntry2 . toHTML (); 


Othcv- ms*ta^dcs s*till 

share 七 he same 


m 


■the dlds 


s. 
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creating custom objects 


Classes, prototypes, awd YouCubc 

Ruby is a little overwhelmed with all the talk about classes 
and prototypes, but she has a pretty good sense that 
YouGube could benefit from rethinking the Blog method 
storage with the aid of the prototype object. 


Wow, using the prototype 
object to store blog methods 
could make the YouCube code 
much more efficient. 



methods so that they are owned by the class. Annotate the code 
and explain what’s going on. 

function Blog(body, date) { 

// Assign the properties 
this.body = body; 
this.date = date; 


// Return a string representation of the blog entry 
Blog.prototype.toString = function() { 

return M [ M + (this.date.getMonth() +1) + M / M + this.date.getDate() + M / M + 
this.date.getFullYear() + M ] M + this.body; 

}； 

// Return a formatted HTML representation of the blog entry 
Blog.prototype.toHTML = function(highlight) { 

// Use a gray background as a highlight, if specified 
var blogHTML = ▼"’； 

blogHTML += highlight ? M <p styles'background-color : #EEEEEE'> M : M <p> M ; 

// Generate the formatted blog HTML code 

blogHTML += M <strong> M + (this.date.getMonth() + 1) + M / M + this.date.getDate() + M / M + 
this . date .getFullYear () + M </strongXbr />’’ + this.body + M </p> M ; 
return blogHTML; 

}； 

// See if the blog body contains a string of text 
Blog.prototype.containsText = function(text) { 

return (this.body.toLowerCase().indexOf(text.toLowerCase()) != -1); 


you are here ► 
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sharpen solution 


(^Jharpen your pencil 

Solution 


The Blog code now uses the prototype object to store the 
methods so that they are owned by the class. Annotate the code 
and explain what’s going on. 


function Blog(body, date) 

// Assign the properties 
this.body = body; ^_ 


this.date = date; 


Now "the 乙 Ohsbrud"to\r -Pod.uses 
solely oh dv-catmg ahd 

"the pV"opc\rtics. 


// Return a string representation of the blog entry 
Blog.prototype.toString = function() { 

return M [ M + (this . date . getMonth () +1) +▼’/▼’ + this . date . getDate () 
this.date.FullYear() + M ] M + this.body; 



/ 


// Return a form 狄 ted HTML representation of the blog entry 
Blog.prototype.toHTML = function(highlight) { 

// Use a gray background as a highlight, if specified 
var blogHTML = ▼"’； 
blogHTML += highlight ? M <p style='background-color : #EEEEEE'> 


Smdc methods bemj 

ass'ij^cd -to a farUular Bloj 
assiym ^ 七 takes 

plate ou"tsidic fcor^s'tv'uC.'toV". 


<p>' 


// Generate the formatted blog HTML code 
blogHTML += '’ 〈 strong〉’’ + (this . date . getMonth () - 
this . date . get Full Year () + "</strongXbr />" + 
return blogHTML; 


- 1) + M / M + 
this.body + 


this.date.getDate() 

M </p> M ; 


/ 



method is set ih 


us’mg the this keywov-d 

// See if the blog bodyContains a string of text 
Blog.prototype.containsText = function(text) { 

return (this.body.toLowerCase().indexOf(text.toLowerCase()) 


the p\ro-totypc object ihstcad o( 
ih the BloftO dohs-tvud'fcov". 


- 1 ) 


A more efficient YouCubc 

The YouGube blog now uses class-owned methods to eliminate 
wasteful code, thanks to object prototyping. No matter how many Blog 
instances are created, only one copy of the methods are created since they 
now reside in the class. The cool thing is that from the YouGube script’s 
perspective of using the Blog object, nothing has changed. 


Blog ihs^ h ^ cs 

^eihods 
ih ihe d3ss. 





alert(blog[0]) 


blog[2].toHTML() 



blog[3] .containsText( M cube 
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creating custom objects 


BULLET POINTS - 

■ A class is a description of an object, while an instance 
is an actual object that has been created based upon 
that description. 

■ A class lays out the properties and methods of an object, 
while an instance places real data in the properties, 
giving the methods something to work with. 


■ The this keyword is used to access an instance from 
within its own code. 

■ The prototype object allows methods to be stored 
in a class, preventing instances from unnecessarily 
duplicating code. 


tJiereiare no ^ 

Dumb Questi9ns 


I’m still not quite understanding 
the big picture of classes vs. instances. 
What’s the deal? 

The idea behind a class is to make 
it easier to create and reuse objects. You 
could create one-off objects as object literals 
all day long and never have a problem other 
than wasting a lot of energy unnecessarily. 
It’s wasteful because you'd be duplicating 
your efforts. Kind of like an architect who 
insists on redrawing the plans for the same 
house every time he wants to build it again. 

Why not create a template that can be used 
to create as many instances as you want, 
resulting in a lot less effort? That’s where 
classes enter the picture—create one class, 
and then use it to create as many instances 
as needed. 

OK, so classes are about making 
it easier to create objects that are similar 
to each other. But what do this and 
prototype have to do with that? 

The this keyword lets you access 
an instance from within one of its own 
methods. Its primary usage is in accessing 
instance properties. So if you want to access 
a property named x from within a method, 
you say this . x. If you were to just say 


x, the code wouldn’t know you were trying 
to access a property of the instance; it would 
just think x was a variable. That’s why 
constructors require you to use this when 
creating and initializing properties. 

prototype is a different animal 
altogether. It provides the mechanism 
for creating classes. Unlike some other 
programming languages such as C++ and 
Java, JavaScript doesn’t truly support 
classes as a concrete part of the language. 
Instead, JavaScript uses prototypes to 
simulate classes. The end result is similar 
but JavaScript requires you to create 
“classes” by manipulating the prototype 
object, which appears as a “hidden” property 
of every JavaScript object. By storing a 
property or method in the prototype 
object, you effectively make it accessible as 
part of a class, as opposed to just part of an 
instance. 

How do constructors fit into the 
class equation? 

Constructors are a very important part 
of establishing JavaScript classes because 
they are responsible for creating object 
instances. You can think of a constructor 
and a prototype as representing the two 
major pieces of the JavaScript class 
puzzle. Constructors take care of setting up 


everything for instances, while prototypes 
handle everything at the class level. Both 
entities working in concert give you the 
ability to do some pretty cool things because 
there are compelling reasons for positioning 
some members at the instance level and 
some at the class level. We continue 
exploring this issue throughout the chapter. 

I’m a little confused by the naming 
convention used with objects. Sometimes 
an object is capitalized, sometimes it’s in 
lower camel case. Is there some rule I’m 
missing? 

The only rule is that class names 
are capitalized, while instance names are 
in lower camel case. This is because an 
instance is really just a variable, and variable 
identifiers use lower camel case. The 
inconsistency mainly has to do with the fact 
that we’ve been using the term “object” fairly 
loosely. To be accurate, however, classes 
such as Blog should be capitalized, 
while instances such as blogEntry or 
blog [ 0 ] should be in lowerCamelCase. 

This naming convention makes sense if you 
think back to other standard objects that 
we’ve used. You might store the current 
date/time in a variable (instance) called 
now, which is created from the Date 
object (class). 
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sign here...and here...and here... 


Signing the blog 


Ruby is digging the efficiency and organizational improvements that 
object-oriented programming, or OOP, has brought to YouGube but she’s 
interested in doing more than just improve the code behind the scenes... 
she wants to add a new feature. 



rd really like to create 
a signature that 
appears below each blog 
entry...right about here! 


p^ un d a 7x7x7 cube for sale online. Yikc&l That one could bo a bca&t. 


Ruby figures that adding a signature property to the Blog class might 
do the trick. Then she can just set the property in the constructor and 
display it with each blog entry...problem solved! 


fi/29/2008 
Met up with some 
•mgs. 


fellow cubcrs to discuss the prospect of a 7x7x7 cube. Mixed 


ofemirsc.nowrmborodand shoppy for a new one 


headache mm over ihc new cube. Gora nap. 


rinne 


8 / 14 / 2 刪 , , 

Gul the iikw cube I oriltiiixl. It's a. real peaiL 


FntriF\ 


Rimy 


All 





Should Ruby create the signature as an instance property? Can you think of any reason why 
this might not be such a good idea? 
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therefore n9 

Dumb Qn 


Questi9ns 


I keep seeing the term object- 
oriented. What does it mean? 

The term object-oriented gets used 
(and abused) an awful lot in programming 
circles, and it can mean different things to 
different people. In general, object-oriented 
programming (OOP) involves building 


The s—Wc 
i\\t sa^c *fov all 




software out of objects, such as how the 
Date object is used in the date property 
of YouCube blog entries. 

Most programmers associate OOP with 
using objects extensively throughout a 
program. At least in theory, a truly object- 
oriented program can be broken down into a 
collection of objects that interact with each 


0S ^ H/2QQ8 

SZ:ZT eL 


other. There are object-oriented purists out 
there who will argue that JavaScript doesn’t 
qualify as an OOP language. Save yourself 
the energy and try to avoid that debate. 
There are valid arguments on both sides, but 
at the end of the day nobody wins. 


刪 9/2008 
S'olvecJ ff^iQ 
an d shopping 

by PcJ22ler 


Wait a minute. Doesn’t Ruby 
have just one signature? If so, 
why does each instance need its 
own signature property? 


)llln 9 oven the new 


嶋 6/2003 _ 

^ 神 0 胂汕 eadQche = 

^■o^fanap. 
k Pa ^len ^aby 

08 ^21/200s 

0 ^29/2008 


Maybe one signature^^^^^^H 

Knowing that the blog signature is the same for all instances, there’s no 
need for each instance to have its own signature property. What Ruby 
needs is a class property, a property where there is only one copy that is 
stored in the class instead of a different copy in each individual instance. 


TV si^aWc ?v*o\>crb/ 
should be sWd m 七? 
Blooy tlass, m tath 

\)\o^ 


Bto9 A 

— _ w 
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store once, access many 


Class properties are shared, too 


Class properties are very similar to class-owned instance methods 
in that they are owned by the class with a single copy available to all 
instances. In some ways this is more significant when it comes to data 
because it means that the property has only one value that is shared by 
all instances. This is exactly what Ruby is looking for when it comes to 
the new signature property because there is only one signature for the 
entire YouGube blog. 


s-fcov-cs i-ts ovm 

p\ropc\rtics. 


Blog 


l-P you 

Blo^.s'i^aWc 

{\\t pvopcvty all 




|-f you 七 he 

body fvopcvty of 
七 his blo^ tY\{x^) »*t 
docs^-t 

cr\*t\rics. 


Tlic sighdtuve class 

P^ropcvty is sWcd 

o^ly ih ihe ^lass. 


A class property 
is stored once in a 
class tut accessible 
to all instances. 


I-P you date 

pvofev-by o\ *bW’s bloj 

or^ly 

t^'is c\r\*bv-y. 


Blog 


Met up with some 、 
fellow cubers 
to discuss the 
prospect."" 

August 29th, 2008 


Even though the signature property is stored in the Blog class, it is 
readily accessible to any instance that wants to access the blog author's 
signature. 



How do you think you could go about creating a class property? 
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Crcatmg class properties with prototype 


For all the talk about where a class property is stored and the sweeping 
impact that has on life as we know it, creating a class property is 
surprisingly mundane. In fact, a single line of code is all it takes: 



Blog. prototype. signature 

^ ^_ 


Puzzler Ruby"; 


s 

The Blog dlass is 
spc^i-Picd -Pi\rst ; tliCh 
the piro-to-type 


You pvokablY jessed \i) 

^ro*to 七 Y? C 。'^ 七 1 S 十 ' 

dlass pyroses art 如代 d. 


T\\c dlass pyoferty is 
dressed us'm^ object 
(do 七）灼 otaticw. 


Class p\ropc\rtics doh’t 
have -to be initialized 
but ih this case \i r^akes 
sehse bc^usc -the blog 
author is already khovm. 


One of the most interesting things about this code is what you can’t fully 
appreciate by looking at it by itself — the code doesn’t appear inside of 
a constructor like the code that creates instance properties. The reason 
is because constructors are used to bring instances to life, and therefore 
aren’t capable of creating class properties. Instead, class properties must 
be created outside of the constructor. 

Instance properties 



Class f>v-opc\rtics av-c 

^v-catcd outside ap 如 

object s dohS't\rud'to\r with 
3 little help -pv- the 
hiddeh p\ro4>typc object 


Or\t tofy 

s'l^atuv-c -for all 

blo^ cr\*t\r'ics. 


Instate pvopcrt'ics av-c 
tv-ca*tcd ms'idc c^f 3r> 
objcdVs dons*tv"u£.*fcov-. 


Evevy Blog ihs-tcihde 
gets i-fcs owh Coyy o( 

body av\d date. 


:^|j^rpen your pencil 


Write code to display the signature property in an alert box. 
Hint: Assume the code is located inside a Blog method. 
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sharpen solution 


(^Jl^rpen your pencil 

Solution 


Write code to display the signature property in an alert box. 
Hint: assume the code is located inside a Blog method. 





Class pvopcvtics av-c Btctsstd 
jus 七 like pv-opcvt'ics, 

usm^ i\\t tii'is keyword! 


tJiereiare no ^ 

Dumb Questi9ns 


Why do you even need to store 
the YouCube signature in a property? 
Couldn’t it just be entered as part of the 
body text for each entry? 

It's certainly possible to include a 
signature in every blog entry as part of the 
body text, but that requires unnecessary 
time and effort, assuming there is only one 
person posting to the blog. It would get 
tiresome for Ruby to sign every blog entry 
when there is such a cleaner way to handle 
the signature using JavaScript. And who’s to 
say she might accidentally enter a typo and 
become "Puzzled Ruby"? Not a good thing! 

Another option that is more viable is to 
just use a string literal for the signature 
when formatting a blog entry as HTML. 

This approach works fine but it buries an 
important piece of data, the signature, 
down in the blog formatting code where it’s 
difficult to find and maintain. By placing the 
signature in a class property, you make it 
easily accessible, and therefore much easier 
for the blogger to identify and change. 

How would creating a blog entry 
change if the signature was an instance 
property? 


Remember that each instance of an 
object gets its own set of instance properties 
that are initialized in the constructor. If the 
signature property was an instance property, 
the Blog () constructor would need to set 
it in each and every instance. This wouldn’t 
necessarily be all that big of a coding hassle 
since the constructor could set the property 
to the signature string. However, behind 
the scenes, there would be as many copies 
of the signature as there are instances, 
and that would be extremely wasteful. 

Not only that, but it would be possible to 
change the signature for different instances 
independently of others. 

So if I wanted to modify YouCube 
to support multiple bloggers, would 
I change the signature to an instance 
property? 

Yes, and that would be a good idea 
because in a multi-blogger scenario the 
signature property has the prospect 
of needing to hold different values for 
each instance. The best way to handle this 
would probably be to add an argument to 
the Blog () constructor that allows the 
signature string to be passed in. Then use 
that string to initialize the signature 
instance property. In other words, handle the 


signature property exactly the same 
as the other Blog instance properties. 

Class properties seem to work kind 
of like global variables. How are they 
different? 

Class properties are in fact a lot like 
global variables since they can be accessed 
from just about anywhere. Class properties 
are also created similarly to global variables, 
at least in terms of where they're created— 
from the main script level outside of other 
code. Where class properties differ from 
global variables is in their association with 
a class, and therefore with instance objects. 
This means you always have to access a 
class property with respect to an instance. 

Hang on. Class properties have to 
be accessed through an instance? 

Even though class properties are 
created using the prototype object, 
which stores them in a class, they must be 
accessed through instances. So a class 
property is accessed just like an instance 
property, using the this keyword and 
object (dot) notation. The difference is 
really just where the property is stored—in 
the class (class property) or in a specific 
instance (instance property). 
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Signed and delivered 


With the signature class property created, initialized, and ready to use, 
Ruby is ready to see it put in action. Looking back at the code that formats 
a blog entry for display in a browser, the toHTML () method is where the 

Blog. prototype.toHTML = function(highlight) 

// Use a gray background as a highlight, if specified 
var blogHTML = 

9 .. <p s tyle=' background-color : #EEEEEE' > 

blogHTML += highlight ? <P sty_Le ^ 


The "toflTAIL.0 method 
how -Pov-rwa-ts the sighatuv-c 
as of a blog Chtv-y. 


'<p>' 


// Generate the formatted blog HTML code 

..am + n + n / n + this . date. getDate () 
bloqHTML += ”<strong>” + (this.date.getMonth() 

/>- + this body + "<br /><_>” + this.signature + 

this. date. getFullYearO + "</strong> br 

"</em></p >"r 
return blogHTML; 


Ruby’s si^aWc 

r rs as pav-t 

bloj 


w/2mn 


Now there s no 
mystery about who’s 
writing each blog entry. 


b PnW[WCU>fu 

始 mm 

hy t0T 0n ^ one could be a 

拟卿 


Ruby has used OOP techniques to further extend the JavaScript language 
by adding a signature class property to the Blog class. More importantly 
to her, she’s managed to add a more personal touch to the YouGube blog. 


is \TC+C\rChdcd just like 3 

y)0\rn\sl p\ropcv**ty. 
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instance property vs. class property 


Fireside Chats 



Tonight’s talk ： Instance and class properties talk data 
ownership and secret societies 


Instance property: Class property: 

So you’re the other guy I’ve been hearing about. 

I have to say I don’t see why you’re here. I do an 
excellent job of allowing object instances to be 
unique and keep track of their own property values. 

I’m sure you do, and that’s an admirable thing. But 
did you know that sometimes instances don’t want 
the hassle of keeping up with their own data? 

Now that’s hard believe. Go on... 

Well, there are situations where a piece of data is 
common to all instances, kinda like how a secret 
club has a secret handshake. Each person in the 
club knows the secret handshake but it’s a club-wide 
handshake. If some gal in the club invents her own 
secret handshake, it screws everything up. Then 
some other girl has to top that with her handshake, 
and before you know it nobody knows the secret 
handshake anymore because there are lots of them. 

So you’re saying I wouldn’t be the best way to store 
a secret handshake? 

That’s right. No offense, but in this case the club 
members just need one handshake, even though all 
of the people need to know about it. 

I see. But what about a secret password? Gan I store 
that? 

Maybe. If each person has their own secret 
password that is personal to them, then yes, you 
would be excellent for storing secret passwords. 

Awesome! So let’s get started. I’m starting a secret 
club and we’re both getting our own passwords. 

But you don’t know the secret handshake.. .gotcha! 

Good one! So what is it? Really. I’m serious... 
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duplicate code is a ho - ho 

Ruby is at it again. Never one to rest on her laurels, she’s 
decided to look even further at improving the efficiency of 
the YouGube code. She has spotted some duplicate date 
formatting code that she’s convinced can be eliminated 
somehow with a crafty application of OOP principles. 


This code seems to be 
duplicated unnecessarily. 
How can I cut it? 


<html> 

<he <txtle>YouCube - The Blog for Cube Puzzlers</t 1 tle> 

〈script type= n text/javascript ”〉 

// Blog object constructor 
function Blog(body, date) { 

this!body ^bodY 0 ^r^Nothing going on today ’； 
this.date = date I I new Date(), 

// -turn a st.in, ^epresentation^f t h e 
Blog .prototype.to 

■ ■ r I ^― 


re 


b . getMonth^ 


this.date•getDate() 


// Return a formatted HTML representation of the blog entry 

Blog. prototype. toHTML = f- nc ^on(hxghlxg ) ifiecL 

// Use a gray background as a highlign^, ^ 

,r、 n : — —〆 

return blogHTML; 

// See if the 二二 

^^^(trs-.body.indexOfltext, != -D ； 

PuzzXe, K Uby "； 


"This 

匕 ode is idch-tidal, ahd 
thc\rC-fo\rc a bit wastc-Pul. 


'<p>' 


/ 


+ this•date.getDate() 
^^ : em ； - 1 


: e 






How could you eliminate the 
duplicate date formatting 
code in YouCube? 
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where to format 


A date formatting method 

Ruby thinks a decent solution to the duplicate date formatting code is to 
add a date formatting method to the Blog object. In order to reuse the 
code, it must be placed in a function or method, and she might as well go 
with a method since the Blog object is responsible for formatting dates as 
part of formatting a blog entry. Or should she? 


If formatting a date is really a behavior 
of the Date object, would it make more 
sense for the method to be a Date 
method? Is there any way to add a method 
to a standard JavaScript object? 


o 


Pack to the prototype object 


What could be more powerful than taking a pre-existing object and 
making it even better? As it turns out, there is a way to modify a standard 
object, and it turns out providing the ultimate option in terms of 
extending the JavaScript language. The key to extending standard objects, 
or any JavaScript object for that matter, is the prototype object. We’ve 
already used the prototype object to extend the Blog class with class 
properties and class-owned methods. There’s nothing stopping us from 
doing the same kind of extending to built-in JavaScript classes. 


5 



allows 

vou -bo add \>v-ofcvt»cs a^d 
ai -tV^c tlass level 
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Extending standard objects 

The key to extending an object lies in the prototype object, and every 
object in JavaScript has one. So you can extend any object by adding 
properties and methods to its prototype object, which establishes class 
properties and class-owned methods. In the case of a built-in JavaScript object, 
adding a property or method to its prototype object means any new 
instances of the built-in object will have access to the property or method. 


Tke prototype 
otject allows you 
to extend tuilt-in 
JavaScript otjects. 


String 


Adding a method 
to the prototype 
of a built-in object 
places the method 
in the object class. 





// Return scrambled string 


Cvca*tc mc*tKod as 
a mcmkcv- 

产 obj 私七 . 


Using the new String method is just a matter of calling it on an 
instance of the String object. 

alert (this . signature . scramble ()); 


New objects created 
from the class can 
then use the method. 

String 


— your pencil 



Write the code for a method called shortFormat () that is an 
extension to the standard Date object, and whose job it is to 
format a date as MM/DD/YYYY. 
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sharpen solution 


c^Jharpen your pencil 

Solution 


Write the code for a method called shortFormat () that is an 
extension to the standard Date object, and whose job it is to 
format a date as MM/DD/YYYY. 


Tiic method is 

added bo .i 

fv-o-to-tyfc of 
i\\t Pate object 


\rc*tum (*tiVisytMorrthO + I) + V” + *tlVisytDa*tcO + V” + -this.jctFulIycav*( )； 


Custom date object - better YouCube 



The customized Date object makes YouCube more efficient and extends 
the features of the built-in object. YouCube also becomes easier to 
maintain since the date format can now be altered in one location, yet 
affect the appearance of dates throughout the blog. Granted, OOP 
improvements to script code don’t always present immediate sizzle in the 
form of visual changes, but they do often result in code that just seems to 
work better over 


SS a rally o^idc of a local toy stoic that stopped carrying cube p^lcs. 

Power to the py zzlcrs I 
by Puzzler Ruby 

Scad and o^cd sc^y 7x7x7 cube. a ^ excise 

regimen to prep 狐 
by Puzzle 

忠工 somefenowc^to 伽⑽ P 卿 ^ 0f a7x7X? CUt>C M3XCd 

feelings ■ 

by Puzzle Ruby 

&7X7X7 ebe fc, S.IC online. YDccs! ™ one could be a beast. 
by Puzzler Ruby 

STc new cut, bm of course, now Im bc t cd and « for a new one, 


Blog dates h 
-Po\rmattcd usih^ a 
^us^torv^ n^c^tlioci o-p 

the Date object ■ tyPu^ler Ruby 
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A class can have its own method 

The custom shortFormat () method of the Date object is a class- 
owned instance method ， meaning that it has access to instance properties 
even though it is owned by the class. This is what allows the method to 
format the date stored within a given instance. It is also possible to create 
a class method, which is a method owned by a class that cannot access 
instance properties. Glass methods can access class properties, however, such 
as the signature property in the Blog class. 


Class metkocts are 
owned ty a class ， 
and can only access 
class properties. 

Blog 



Class w\c*tV^odis ac.fi.css 
tlass fv-o\>cv-*t'»cs jus 七 f me 



CUss methods 

把以 ss ihs-tahdc pv-opcv-tics 
o\r ructhods. 


|y\S-ta^C 


Creating a class method is a matter of setting the method to the class 
without using the prototype object — just assign the method to the 
class using the class name and object notation. 


Blog. showSignature ― function () { 

alert ("This blog created by " + Blog.prototype.signature + 



^ £，Uss 

•(Vorw a dUss method, you 
hdvc "to dv*il| dov/h *fco the 
pv-o-totype p\ropcv-ty. 


} f S'mtc si^aWc 3 

£.lass pv-opev-ty) *bVic tlass 

... mc-t^od V^as autss *to it 

Since class methods have no association with an instance, you call them by 

referencing only the class name. This doesn’t mean an instance can’t call a 
class method, it just has to do so using the class name. 


Blog. showSignature ()； 

4 

^ - 丁 k 匕 lass hdme is 
the key -to 

a 匕 lass method. 





Can you think of any code in YouCube that would 
make sense as a class method of Blog? 
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back to the Blog class 



Could a class method be 
used for the blog sort 
comparison function? 











P^or a wh!,f 





09 / 01/2008 



Went ahead and ordered the scary 7x7x7 cube. 
(Starting a mental exercise regimen to prepare. 



Rethinking the blog sorter 


This is an intriguing idea because the sort comparison function is 
definitely playing a role that is specific to the Blog object. Currently, this 
function is created as a function literal inside the showBlog () function, 
which is where it is needed. 


Blog sovtmg is 

handled inside the 
showBlogO *fuh^tioh, 
whidh ish’t a pav-t 
of the Blog object. 


function showBlog(numEntries) 



// First sort the blog in reverse chronological order (most recent first) 
blog•sort(function(blogl, blog2) { return blog2.date - blogl.date; }); 


I 七 be possible *to i^ovc so\rt 

£.omf>d\risoy\ to&t *to 3 ddss method- 


One of the fundamental concepts of OOP is to encapsulate the 
functionality of an object within the object itself, meaning that outside 
code shouldn’t be doing work that an object can do for itself. In this case, 
the comparison of blog entries for sorting purposes could be done inside 
the object instead of in the showBlog () function. But, can the sort 
comparison code be placed into a class method of the Blog class? In 
order to answer this question, we have to figure out if the method requires 
access to instance data or methods. That would be a big problem since 
class methods can’t access anything in an instance. 
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Examine the sort comparison fuwctiow 


The only way to know if this will work is to break down the function and 
see what’s going on. Here’s the sort comparison function literal with the 
code formatted more like a normal function: 

T~wo blog ihs-bhdcs av-c passed 
… "to the -Puh^tioh as avgurwchts. 



function(blogl, blog2) { 

return blog2.date - blogl.date; 



TiiC soV" 七 C.omp3\risoir\ 

•mvolves a 灼 

o-f 七 *bwo av"^iAmcr\*ts- 


Although the function deals directly with blog instances, they are passed 
in as arguments. This is different than attempting to access a property 
or method inside an instance through the this keyword, which isn’t 
possible in a class method. So the sort comparison function doesn’t need 
access to anything within an instance, which makes it a perfect candidate 
for a class method. 

In fact, the sort comparison function doesn’t even require class properties, 
although it could do so if necessary because class methods do have access 
to class properties. 


A tlass mc-tliod cav\ autss a 

dass pvopcvty i-f -to. 









\ 




The sovt dompa\risoh -Puh^tiohN 
docshjt heed autss io 
ihstahdc ov- dlass data. 

function(blogl, blog 2 ) { 


return blog2.date - blogl.date 


(hS-tah^C. 



Class. 


七 he sov * 七 dompeivisoh -Puh^ioh 
had heeded dddess -fco ihs-tah^c, 
it wouldn't be possible io make 
•t 3 dass method- 



rpen your pencil 


Rewrite the YouCube blog sort comparison function as a class 
method of the Blog object that is named blogSorter (). 
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class method? over there! 

- your pendl 

Solution 


Rewrite the YouCube blog sort comparison function as a class 
method of the Blog object that is named blogSorter (). 


rr. 人 bl.oji) 



y-c*tfAV：^ blo^Zd^i?. r. blo^l.cla^ 


Tl^ so\rt dompa\risoh method is how a dass 
method o\ the Blog object harmed blogSo^cvO. 


Calling a class method 

The benefit of moving the blog sort comparison function to a Blog 
method becomes a little easier to appreciate when you see the code that 
calls the method. 


function showBlog(numEntries) 
// First sort the blog 



The dckdils o-f sovtihj the 
blog a\rc ir>ow delegated 
"to the blogSortcv-0 dass 
method o-P the Blog dloiss. 


The beauty of this code is subtle but important. The showBlog () 
function no longer has to concern itself with how blog entries are sorted. 
Instead, the details of how blog entries are sorted is handled within the 
Blog class where it logically belongs. 


What’s neat is how the sorting is still initiated outside of the Blog class 
in the showBlog () function, which makes sense because sorting affects 
an entire collection of blog instances. But the specifics of how the sorting 
is carried out with respect to individual blog entries is within the realm of 
something the Blog class can handle. Good OOP design often involves a 


careful orchestration of objects and their surrounding code. 



showBlog() 
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blog 

A picture is worth a thousawd^ords 

Ruby continues to be thrilled by the OOP improvements to YouGube 
but she also knows that users won’t necessarily share her enthusiasm 
because the OOP enhancements have yet to dramatically impact the user 
experience. She has therefore decided that it’s time to add some noticeable 
sizzle to the blog! 



YouCube is great but sometimes I have 
images Td like to share. It would be really 
cool to add an image to some blog posts. 
You know, add a little sizzle to the steak! 


Ruby’s idea is to allow each individual blog entry to support an 
optional image that is displayed along with the date and body text. 
Since not all blog entries require images, it’s important for the 
image to be optional. This also prevents existing blog entries that 
she has already written from breaking. 





How could you alter the Blog object 
in YouCube to support images? 
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image is everything 


Incorporating images into YouCube 


Adding image support to the YouCube blog involves figuring out how to 
incorporate an image into the Blog object in such a way that it doesn't 


interfere with the way the object already works. This brings up two 
important questions that will drive the design: 



What is the best way 
to store a blog image 
within the Blog object? 



How can the blog image 
be added to YouCube but 
remain entirely optional? 



Regardless of how a blog image is stored, we know that it will ultimately 
get fed into an HTML <img> tag so that it can be displayed on the 
YouCube web page. 

1 ^ 一 " A blo^ is 

<img src= M cube777 .png" /> des^vibed us'mj d s*bv'm^ -filename. 


This code tells us that as far as the blog is concerned, an image is really 
just a string. Sure, the string ultimately references an image file stored 
somewhere on a web server, but from the perspective of the Blog object, 
it's just a string. 


As far as tke Blog 
otject is concerned, an 



image is just a string 


loot 

川 _ 
OOiOl 
toioui 

% cube777.png 


So an image could be added to the Blog object simply as a property that 
stores a string, similar to the body property. 


Blog 


丁 he 7x7x7 dubc 
is s-to\rcd ih the -file 
Mmed ^ubc777.fhg. 




T\\t body ^v\d imay 

pvopcv*tics 狄 t 

s-tov-cd "m BI05 
object as s*bri 呼 . 
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An optional blog image 


© 


So the blog image gets stored in the Blog object as a string property 
named image, but the question still remains as to how this property can 
be added to the blog as a purely optional feature. This question ultimately 
has to lead back to the constructor, which is where the object is both 
created and initialized. Surely some special code has to be placed in the 
constructor to deal with the fact that the property is optional. 





function Blog (body, date) { 
// Assign the properties 

this.body = body; 
this.date = date; 


I'm not so sure about that. What 
happens if you don't pass an 
argument to a constructor? Doesn't 
the property just get set to null? 


O 


o 


Missing function arguments become null. 

When an argument isn’t passed into a function, method, or constructor, it 
takes on the value of null in any code that attempts to use it. And in the 
case of a constructor specifically, this means the property associated with 
a missing argument gets set to null, which isn’t necessarily a bad thing. 
The real trick is then to make sure that the optional constructor argument 
is specified at the end of the argument list so that it can be left off without 
disrupting the other arguments. This technique actually works for any 
function or method, but it’s particularly handy for the image argument 
of the Blog () constructor. 



rpen your pencil 


Rewrite the YouCube Blog () 
constructor to support a new 
image property for storing a 
blog entry image. 
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sharpen solution 


(^Jterpen your pencil 

Solution 


T\\t imay pyofcvty is 

dv-ca*bcd dy\d 

■bo {he. av-^umcrtt 


Rewrite the YouCube Blog () constructor to support a new 
image property for storing a blog entry image. 


Blo^body, da*tc, imajc) { 
// Assi^ 


thisbody =• body ； 


,s ^ddcd as the 
. 1 办七 . 此 3 — ⑼ H … 

the ^OhS-tv-u^W. 


this.datc — date ； 


•this.imay ― 


} 



Dumb Questi 9 ns 

Is it important that the image 
argument appears last in the Blog () 
constructor's argument list? 

Yes, and the reason is because the 
image is considered an optional part of a blog 
entry. The real issue here is how you go about 
passing arguments to functions, especially as 
it pertains to optional arguments. If a function 
has two arguments, you have the option of 
passing both arguments, passing only the first 
argument, or passing none of the arguments. 
There is no way to pass only the second 
argument. 

So when it comes to optional arguments, think 
about them in terms of being able to leave 
them off the end of the argument list. Also try to 
think about arguments in terms of importance, 
with more important arguments appearing 
first. Less important arguments that are more 
likely to be considered optional should appear 
near the end of the argument list. Since the 
image argument to Blog () is optional, it 
must appear last in the argument list where it 
can be easily left off. 


Adding imagery to YouCube 

The shiny new Blog () constructor with support for images wouldn’t be 
very useful without some blog entries that use it. In order to create a blog 
entry that supports images, two things have to happen: 



o 


Place the blog image file in the 
same folder of the web server 
as the YouCube web page. 



cube777.png 


Create the new blog entry as a 
Blog object in the YouCube 


Blog 


script code. 
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Completing these steps results in the following code, which successfully 
creates a new blog entry that passes an image string into the last argument 
of the Blog () constructor: 

new Blog("Wow, it took me a couple of weeks but the new cube is finally solved!", 

new Date ("09/19/2008") , M cube777 .png" ) TViC blo^ imajc is passed 

^ *m*to last o-f 

V_BI03O 

Showing the blog image 

Now that a blog entry has been created with an image, there is one last 
piece of business left for the image enhancement to YouCube. All this talk 
of constructors and optional arguments wouldn’t mean much if the code 
that displays a blog entry didn't actually factor in the new image property. 

This code is located in the toHTML () method. We already know that 
this method is responsible for formatting the blog as HTML code, except 
now it has to take into account whether or not the image property has 
a meaningful value. What’s really going on is that there are two different 
ways of displaying a blog entry, one with an image and one without, and 
the existence of an image is what determines which way the blog gets 


The Blog object's toHTML () method is missing a piece of code 
that will allow optional images to be displayed. Write the piece of 
missing code, and annotate what it does. 

if ( ) { 

blogHTML += "<strong> M + this.date.shortFormat() + 

"</strongxbr / xtablextrxtdximg src= ,n + this . image + 

"' / ></tdxtd style= ' vertical-align : top ' >" + this, body + "</tdx/tr></table><em>" + 
this.signature + "</em></p>"; 

} 

else { 

blogHTML += "<strong> n + this.date.shortFormat() + "</strongxbr / >" + this.body + 

"<br / ><em>" + this.signature + "</em></p> n ; 



displayed 



A blog Ch-tiry should 
"ow be displayed 

a^ovdihg -to the logic 

this pseudocode. 


If (image exists) 


Display blog entry with image 


Else 


Display blog entry without image 
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(^Jterpen your pencil 

Solution 


The Blog object's toHTML () method is missing a piece of code 
that will allow optional images to be displayed. Write the piece of 
missing code, and annotate what it does. 


if 




blogHTML += "<strong>" + this.date.shortFormat() + 


|-f i\\t way \>v-o\>crty set *to arv atlual 
wajc, ^ -test 6oWrbcm evaluates to 
•true ar^d IS Aovm. 


'</strongxbr / xtablextrxtdximg sre: 


+ this.image 



/ ></tdxtd style= 1 vertical-align : top * > M + this . body + "</tdx/tr></table><em>" + 


this.signature + "</em></p>"; 


Otherwise, the blog Chtv-y is 
showh like hoirmal wi-th ho ir^y. 

blogHTML += "<strong>" + this.date.shortFormat() + "</strongxbr / >" + this.body + 
"<br / ><em> M + this.signature + "</em></p>"; 




Aw object - powered YouCube 

Ruby is ecstatic. Her blog has grown by leaps and bounds thanks 
to objects, and it now sports a slick new image feature that she just 
knows her visitors will love. 

YouCube - The Bloft for Cube Puzxltrs 


Search Bloy | 




Wcw JC took me a ooupfc erf wedcs budtiK new cute - 

uilvcd.! 


A blog 
Ch"t\ry with 
By\ 


fry Puuicr Rwhy 

7k73c 7 &ybc.C«jld be my Iflsfblog poU fora*hBt- 
try J?— 

Povi^r w ihc piezfers’- 

by 


itlanr 
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JavaScriptcross 

You know the drill...boxes and words. Fill ’em in! 



Across 

2. A real live object with its own data. 

4. The operator used to create object instances. 

6. The signature in YouCube is one of these. 

9. Software that is designed using objects. 

11. A keyword that references an object from within its own 
code. 

12. An object that inherits properties and methods from another 
object. 


Down 

1. The object equivalent of a function. 

3. The blog sort comparison code in YouCube is one of these. 
5. When a piece of data is placed in an object, it is called 
a. 

7. Every object has one of these objects hidden within it. 

8. A template used to create instances of an object. 

10. Object notation uses these to access properties and 
methods. 
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JavaScriptcross solution 



JavaScriptcross Solution 
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Fold the page vertically 
to line up the two brains 


and solve the riddle. 


V 嫩 


Wkat cio objects acict to most scripts? 


I Vs d o( m’mds, <r 






Objects add so many cool tkings to 
scripts tkat it can te kard to pick 
one tiling. It’s true, some objects outclass 
otkers and make it even tougfker, 
tut in tke end tke answer is clear. 
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11 kill bugs dectd 



餐 

# Good Scripts Gone Wrong 


You never know with these things. One 
day everything works great, everybody's 
happy... and the next day, bam! Stuff flying 
everywhere. Bottom line—ifs good to have 
a guy like me around to fix things. 




Even the best laid JavaScript plans sometimes fail, when this 

happens, and it will, your job is not to panic. The best JavaScript developers are not 
the ones who never create bugs — those people are called liars. No, the best JavaScript 
developers are those who are able to successfully hunt down and eradicate the bugs 
they create. More importantly, top notch JavaScript bug exterminators develop good 
coding habits that minimize the sneakiest and nastiest of bugs. A little prevention can 
go a long way. But bugs happen, and you’ll need an arsenal of weapons to combat them 


this is a new chapter 
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eek … a bug! 


Real-world debugging 

It’s a shocking fact of snack food life... a chocolate bar can contain up to 
60 bug pieces. As scary as that little tidbit of information may be, there’s 
no reason to fear bugs in JavaScript code. JavaScript code can be more 
tightly controlled than chocolate processing equipment. There’s even a 
taskforce devoted solely to the removal of JavaScript bugs. 


BUG SCENE INVESTIGATORS 


It’s Bug Scene Investigators, or BSI, as those in the business refer to them. 
Owen has recently joined BSI as a JavaScript investigator, and is eager to 
prove himself and help rid the Web of JavaScript bugs. 



mvcst^a-tov- a^d 
lover. 


Standing between Owen and 
success are several cases that 
desperately need his attention. 
He’ll have to master the black art 
of JavaScript debugging before he 
can climb the ranks and become a 
full-blown JavaScript detective. 



A bu0— 

bav... yjk cs / 





Gee} Bits 


According to the U.S. Food 
and Drug Administration, 
up to 60 insect "fragments” 
are allowed in any given chocolate 
bar. In contrast to the "real world,” 
the folks at BSI have a zero-tolerance 


policy when it comes to JavaScript 
bugs, and so should you. 
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kill bugs dead 


The case of the buggy IQ calculator 


The first case across Owen’s desk is an IQ calculator script that’s part of a 
page that calculates an average IQ from an array of IQs, and then groups 
users together whose results are similar. So the script is given an array of 
numbers, and then calculates an average and indicates the intelligence of 
that average. 


The -files -Pov Ov/Ch 


dire available ai 


Ivttp:/ / v/y/whcad-Piv-s-tlabs.dorw/ 

books/h-pjs/. 


Owen has been informed that this script is quite buggy. Unfortunately, no 
other information has been provided beyond, “it doesn’t work.” 



113 


. - 『 U3 97, 86, 75, 92, 105, 146, 

Va ^ 7 ： qS 64 ； 165, 96, 97, 88, 108 ]； 


d ⑹ s is 
i^-fco the sdv-ip-t. 


a 


r\ 


dSl 


Casi ； 


1; 


IQ CakdatQT 


Ready to caJcu Laic the average IQ. 


Click DK «s b-eqln ly calculiilon 




TW»s »s V^ov» 咖?七 

li^rU 


esi CasiE l ： IQ Calculator 


B ^ n 


^ avenge is ^Idulaied 
3hd ^Ohvcv-tcd ih-to av\ 

/ J i^clligchdc ^lassi-Pi^t ， oh. w 

A* J 

You aiccStalmg witiipevp&af m'ffra^c 論 Hi 糾 


&JltE 


You miglit not always 
inkerit well-written 
code to ctetugf. 
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who } s your browser? 




Try different browsers 

Owen figures that running the problematic 
script through a few different browsers might 
help shine some light on the problem. He starts 
out with Internet Explorer... 


Double - tk yellow siah 

… the bot-tom Ic-ft dov-hev- o+ 
opChS Sy\ c\r\ro\r wihdow. 


Internet 

Explorer 


Internet Explorer reports an error when the page first loads but Owen 
isn’t sure he can trust it. A quick look at the code for the script shows 
that the variable iqs exists, but the IE browser shows it doesn’t. 
Knowing that browsers aren’t always accurate when reporting errors, 
he decides to press on with the Safari browser... 




rTUflKl 


fc II Wei rj I * 4 D 匕 u VfllrPH ■ m iJ- * ^ 

□ «aMn nrai 




堪 jy. 


ftezd/co catrtaM 


ifw y 
Dm 1 

■M-l 1 I 

URL 施 4^ 






® ，C * w i >4<«h!u[jui' 


Safari 


Tkvariable is de^ihed ih 
the todt) so IB-^s c\r\roV" docsh ； t 
3ppcav* *to nxSkc Sv\y schsc. 


Hmi 


5* IP ^pL u Uic j*- 


■^up^u PQ_ 




r_ Kni ^fw 




frKii.wn,* 


IMn 麵， u am 








y° u ^ouhi dov^ih^^ 

严？心 ode sia^ ai jf 

°V ； hC ^°dc ihai 
… i*bally appear -to be OK. 



Safari points out that the error is on entirely different line of code, 
which doesn’t immediately appear to Owen to have anything wrong 
with it. So he decides to take a stab at locating the error with Opera. 


Ti^c lii^c r\uw»bcv* is d>^cv*CK\*t bu 七 
Codt m i\\t Ofcva 
mattes i\\t Sa-favi tr 


cv\ror 


cv\rov 


B\rowsc\r c\r\rov- dohsoles 

⑽ a g\rcat way "fco 
diagnose JavaSdv-ipt 
dodihg pv-oblcms. 


Opera 


HitJfcL-latcr 






LwmJ riP 


rtf-.IMhfeBKWWWM 

琴 

iMhie-Pii^v 2Lc4 Nn 
• ifiwigs ■： K1 卜 


»1 










「■?f 




L^a^m 






EVW. 


»■»« 




■TCf 


DWpiu! 


qi* raf#*p& 4 li 




*»«Q- 
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Something is strange here. Opera mentions a different line number but 
it’s clearly referring to the same line of code as Safari, which is actually 
good news for Owen. But he still doesn’t see anything wrong with the 
code. So he decides to try one more option, Firefox... 



0 o n 


WcW is fvcttv 
of 七 he W} 


Fiv-c-fox has yet 

扣 othem take oh ihc 

Ime humbev- of -the 
pv-oblcma-t*^ dodc. 




e o 0 


Error 1 Cq4ieoI« I 

/ 门 - 

, O ▲ 

id 

^ / 


All trfprs WarfiKigi 


Clear / 

- L — 


Ev-qIuqec I 

Irfar miiCHtin^ j tirfiarr--rnrul^ifir! 

Hit HifY/JUiers _■ mlEhaelVOocum&ririJhgJd^lr^Tiffhapitf S L /eyamplei IJumi Sjnt 24 


<html> 

<head> 

<titl e>BS 工 Case x . 

. IQ Cal culator</title> 

Sr ” J 


86 ' 75, 92, l 05 , 146 , 77 , 64 
U a^ r \ 0 ；， c l°\ lQClasS ^-ta) { ’ , 

document.getElementByw r- ^ Cal ^ ulat ^on .")； 

calcIQciass (data) + innerHTML 


'You 


are 


H n C f lcI Q C 1 ^s(data) { 

var f° tS thS av erage i Q 
var average = ◦; w 

for (var ± = q. ■ 

抑 era ge += d ； ta t ij ^ 16 ^ 

average = Math.fi oor ( S a 


i++) 


// Return 


average / data. 


if (average < 
return n r 


the classification 


length )； 


20) { of the average iq 

> ，吻灿 Wh0 Sho 咖 kill their tvs 

Slse if av er a g e < 50 { ^ 


r eturn 


People who should 


else if (avera 


really hit the 


books' 


return 


ge < 70) 


people who sh 灿 d hit the books , 


Slse if (averag < 81) f 

} " Pe ° Ple Who 咖咖 consider brain . 

else if (average < 91) { exercises". 

at urn "people who could be .. 

} ° Uld be considered dull". 

else if (average < Hi) r 

} retUrn，，Pe ° Ple ° f avera ge intelligence，,. 

else if (average < 121) f 
)turn people of superior intelligence-., 
else if (average < 141) r 

of _/ 卿打 _ inteiugencei 

else { 

return "geniuses"- 


</script 〉 

</head> 

〈二：二:二⑽聰 ㈣ (咖 ；-> 

<br /> brain -Png" alt=-'brain" /> 

</bo d i y V > id=，，OUtpUt，， > R -dy to 

</html> ㊀ avera ge IQ.</ div> 


65, 96, 9^ 


ealing 


A ha! I think I 
see the problem. 


Q 


o 


FlV'C-fo% lV-mS 

七 Wis Uc *to be 七 he 

souv-tc o( *tKc cv-v-ov-. 


What coding error has Owen uncovered with 
the help of his army of web browsers? 
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it’s a bird, its’s a plane … it’s Firefox 


Firefox to the rescue 


Fireiox is widely consicterect tke 
test ctetuggingf browser arounct, 


Given how specific Firefox is in describing the bug, 
Owen decides to dig a little further using Firefox. 
So he clicks the link in the Firefox error console 
window, and it takes him to the line just before the 
suspicious line of code. 



at least lor tke time teing[. 

Gee| —— 



Not only does Firefox have excellent built-in bug 
detection capabilities, but it also has a debugger 
plug-in called Firebug that takes debugging to an 
entirely different level. The Firebug debugger for 
Firefox can be downloaded for free at 
h ttp://www.getfi rebug. com/. 



FolloWm^ 

todc *fov 

VVck pay, mtludi% a j 

W+l— 七产七 kcW / 

suspicious todc I 


By analyzing the Firefox error 

out that Safari is actually right about the line number (25). 
Firefox highlights and mentions line 24 but correctly shows 


the code on line 25. More importantly, Firefox explains 
exactly what is wrong with the code, which is a simple 
problem yet deceptively easy to overlook. 


TliC i*P s-tatcrwCht is rwissmg pav-Chthcscs 
airouhd the tes-t dohditioh. 
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I can’t figure out how to view the error console in my 
browser. How do I open it? 

Unfortunately, every browser is different, and some make it a 
challenge to find the JavaScript error console. For example, Safari on 
the Mac only allows access to the error console from the Debug menu, 
which is disabled by default. You have to issue the following command 
(write it on one line, with no carriage return) in the Terminal application to 
change the settings and enable the Debug menu: 

defaults write com.apple.Safari 

IncludeDebugMenu 1 

Check the documentation for your specific browser to find out how 
to open the error console and view script errors. The error console in 
Firefox is opened by selecting Error Console from the Tools menu. 

What makes Firefox so special? 


The developers of Firefox did a great job on its error reporting 
capabilities. It simply outperforms other browsers when it comes 
to assessing script errors and pointing you in the right direction 
for finding them. This isn’t to say some other browser may come 
along and do a better job at some point in the future, but Firefox has 
proven itself a very capable browser for debugging pages containing 
JavaScript code. 

What error was Internet Explorer talking about? 

There’s not really any way to know for sure. The reason is 
because the error reported by Internet Explorer has to do with 
the script code not loading property, which is the result of an error 
encountered by the JavaScript interpreter. You know the code is not 
loading properly because the iqs variable is being reported as 
“undefined,” even though the code clearly shows the iqs variable 
getting created. So the only way it can be a problem is if some other 
error is somehow preventing the script from fully loading. 

And that begs the question... is there some other error in the script, 
and what does “undefined” really mean? 


Pebugging oh easy street 

Owen is pretty excited about isolating the bug in the IQ calculator script 
so quickly. And with such a simple coding fix to make, he figures he’ll be 
able to cruise along in this job and make BSI detective in no time. 


This debugging 
stuff is easy. With a 
little help from Firefox, 
my job is a piece of 
cake... with coffee. 


O 



else if 


tHe 


(average < 50) { 


Pla^mj -test 么 cmdiW 
m s\die pav-c\r\*t^cscs solves 
buoy m tKc \Sl taltula^. 


Is there a chance Owen has gotten an early dose of 
overconfidence? He really needs to test the newly 
repaired script before taking the rest of the day off... 
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what happened here? 


The bug report isw't always the bug source 





It’s true, the function braces are OK. As good as it may be in some cases, 
it appears that Firefox is barking up the wrong tree on this bug. However, 
it’s worth taking the mention of a missing curly brace as a clue to study all 
of the braces in the code a bit closer. 


tem 
this time 


Unfortunately, Owen isn’t finished with the IQ^ calculator case because Firefox 
is still complaining, except now it’s a completely different problem. While he’s 
Lpted to stick with the same tactic of trusting Firefox’s assessment implicitly, 
time Owen has his doubts about the validity of the reported bug. 


<html> 

<head> 

<title>BSI Case 1 ： iq Calculator</title> 

〈script type="text/javascript"> 

^ " I 113 ' A % A 叫阳 ， A 97, 88 , 108 


TVis is 七 he 

bv-adc 

is •…•叫 

dbou*b- 


function showIQClass(data) { 
alert (’’Click OK to bea-i n m i 
document • getElementByL ("output"!" ； 

calcIQClass(data) + ) • ln _H TML 


function calclQciass (data 、 
// Calculate the s.\ 
var average = 0; 
for (var i = o ； i < 
average += data[j 
average = Math.floo 


"You are dealing with < em >" + 


*tV)c 

bv-atc wcy\*t'ioy\cd by 

piv-c-fo%, so 灼 。七 

is w\issnr\^ >/| 七1 七 ViC 

七 i。 扒 iov* 

Agaih, ohc bug at a 
so let’s ^ohtmuc {x> 
•9^o\rc this ohC (or how. 


<ry 


// Return the class 
if (average < 20) { 

} return "people whe 

else if (a^^ge< 

retujs«^^pe 0 p le w h c 

else if (average < 7 
I return ^people who 

else if (averag < 81 
)return "people who 

else if (average < 9: 

} return "people who 

else if (average < 11 
l return "people of 1 

else if (average < 12 
^ return "people of s 

else if (average < 141) t 、 

} rStUrn ，，吻 _ of very superior 
else { 

return ’’geniuses ，，； 


EV^IUOEC 


hr\r 


Trfar. 'heiwHl ! 亡 

W \ciurtf\i\t Hl» /JJLK^r^ml^aalJOQCyr 


jdl'lr^T.'fhjrw I UgKamnlet/a^i.'ra!.*! 


Uric 


I think your magical debugger just — 
screwed up. Clearly, the braces around 
the function in this code are just fine. 


</Script> 

</head> 

〈body onload="showIQciass(iq S ) •-> 

<img^src="brain.png" al t =»brain» /> 

</body> ld ° UtPUt >RSady to cal culate the average IQ.</div> 
</html> 


You can’t always trust the browser. 
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<html> 

<head> 

<title>BSI Case 1 : IQ Calculator</title> 


BE J 峽 Itif< 

Your job is to play JavaScript interpreter 
and follow the trail of curly braces in 
tire code to find out vAm has gone wrong 


<script type="text/javascript"> 

var iqs = [ 113, 97, 86, 75, 92, 105, 146, 77, 64, 114, 165, 96, 97, 88, 108 ]; 


function showIQClass(data) { 

alert("Click OK to begin IQ calculation .”）； 
document.getElementByld("output").innerHTML 
calcIQClass(data) + "</em>."; 


'You are dealing with <em>" + 



function calcIQClass(data) { 

// Calculate the average IQ 
var average = 0; 

for (var i = 0; i < data.length; i++) { 

average += data[i]; 

average = Math.floor(average / data.length); 

// Return the classification of the average IQ 
if (average < 20) { 

return "people who should kill their tvs"; 

} 

else if (average < 50) { 

return "people who should really hit the books"; 

} 

else if (average < 70) { 

return "people who should hit the books"; 

} 

else if (averag < 81) { 

return "people who should consider brain exercises"; 

} 

else if (average < 91) { 

return "people who could be considered dull"; 

} 

else if (average < 111) { 

return "people of average intelligence"; 

} 

else if (average < 121) { 

return "people of superior intelligence"; 

} 

else if (average < 141) { 

return "people of very superior intelligence"; 

} 

else { 

return "geniuses"; 

} 

} 

</script> 

</head> 


<body onload:"showIQClass(iqs);"> 

<img src="brain.png" alt="brain" /> 

<br /> 

<div id="output">Ready to calculate the average IQ.</div> 
</body> 

</html> 
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BE . Iti 哼 efei §©]ug©n 

Your job is to play JavaScript interpreter 
and follow the trail of curly braces in 
tire code to find out vAm has gone wron^. 


<html> 

<head> 

<title>BSI Case 1: IQ Calculator</title> 


<script type="text/javascript"> 

var iqs = [ 113, 97, 86, 75, 92, 105, 146, 77, 64, 114, 165, 96, 97, 88, 108 


function showIQClass(data) { 

alert("Click OK to begin IQ calculation."); 
document.getElementByld("output").innerHTML 
calcIQClass(data) + "</em>."; 

} 

XKc w»issnr\^ 

乙 l oSm 3 // Calculate the average 

Should var average = 0; 

KCVC, C^loSl^ for (var i = O ’； i < ， data, length'. ±++)(7^ 

o^ly *tK 


'You are dealing with <em>' 




average += data[i]; 

average = Math.floor(average / data.length) 


addition *to 
i\\t avcvay 
vav-'iablc- 


// Return the 
if (average 

return "people 


Q s ： 


.e clas^ific 

< 20 )(n. 

ople wnb^Efh 


ication of the average IQ ° ^ 

is rn'iss'm^ >*ts 

ould kil1 their tvs " ; Watc! 


if (average < 50) 
return "people who 

Cy — 

ease if (average <70 




really hit the books^^^ 




Ss ； 


turn "people who 


if (averag < 81) 
return "people who 




if (average < 
return "people whc 



•d be considered dull 


if (average 
turn "people 


< 111)(71^ 

of average i 




intelli 



if (average < 121) 
turn "people of sup 


e^^>r i 


intelligence 



if (average < 141) O 


return "people of very superior intelligence' 



</^6ript> 

</head> 

<body onload="showIQClass(iqs);"> 

<img src="brain.png" alt="brain" /> 

<br /> 

<div id="output">Ready to calculate the average IQ.</div> 
</body> 

</html> 




AppiHff t«e 

cpRty 
cRu$H( 9 $ 
t«e Buff. 

You dould also just kill 
-the bvadc a-P*tcv- 

(or loop smdc 七 he 
loop is or>ly vu^'m^ 

3 sm^lc l*mc CoAti 
al 七 hou# 七 he bv-adcs help 
make \\ dlcav v/ha 七 Code 

is m loop. 


Mismatekect or 
missing curly traces 
are a common 
JavaScript tug[ tkat 
can te avoided witk 
attention to detail 
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Variables gone wtftf 




Owen can’t seem to catch a break as the stream of IQ^ calculator bugs just 
keeps on flowing. Now Firefox is reporting that a variable is “not defined，’: 
which sounds sort of like the bogus error Internet Explorer reported early 
on. Except this time the undefined variable is named averag, not iqs. 


Noi 如 that ihc sc^ohd 
ps "ow gohc away. Sometimes 
-ri^ihg ohc bug will hatuvally 
resolve \mo\rt ohC CVVov-. 





else if (averag < 81) { 

return "people who should consider brain exercises 



Undefin 


(^U^rpei your pencil 



Write down what you think"undefined” means in the context of 
the latest bug in Owen's investigation. 
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495 






















check your work 


Write down what you think"undefined” means in the context of 
the latest bug in Owen’s investigation. 

v-c-fcv-s *to a vav-iablc has ^o*t bcc^ dv-ca*tcd (usmg 

va\r) ov- 七 has d\rca*tcd bu 七的 。七 yc*t assi^ed a value- Ei-tKcv- way, 


(^Sharpen your pencil 

Solution 


Sometimes ifs the simple things 

In this case “undefined” definitely refers to a variable that has been used 
without having been created, although in this case it’s by accident. The 
only reason the variable is undefined is because of a typo that results in 
the JavaScript interpreter thinking it is an entirely new variable. 


Sometking as 
simple as a typo 
can often wreak 
liavoc on a script. 


fU // t Cal c C ^ 1ClQClaSS(data) { 
va r average^^,^ 咖卿印 
for (var i = 0 - % H 
} av erag e += data[i ]； Sngth; i++ )( 

心叫咖 ^ /data . length) ; 

- sr s r fi — - -e 
> return 

el ret lf (aVSrage < 50 ) { 

i ls 吻叫咖处 。咖卿 ^ hlt the bQoks ” ； 
SS lf ( av erag e < 7 0 ) / 
returnjpeople who should hit the be 

“f 丄 -— 〜 n 

else if (average < 91) r 

^ ls rStUrn " Pe ° Ple who could 
Se (average < 1H) r 

二 lnt e lllgence , 

elSe lf (ave rage < 121 ), 

} ^ ” 吻 * of super 


pia^os'm^ a b)Y° 

is i\\t hard 〆••• 

七 W is easy- 


Fixing the mistyped vaHdble 
Mrwc ^solves -the Uhde^ihed 
vav-iablc pv-oblcrw. 


} 


exercises M ； 


.se if (average < 81 ) 

return "people _ 一 

brain exercises M ; 


who should consider 


1 igence ， 

2ry ^^^^ntell igence „ ; 


矜 ^ A 


m 


•n 




Ready to calculate ftc aveiagc 


^L>iy 


Clk k OK ro begin IQ c^fculaclon. 


OK 
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Is there a difference between 
"undefined" and “not defined ”？ 

No. They mean exactly the same thing, 
it’s just that some browsers use one term 
and some use the other. Consider the two 
terms to be entirely interchangeable. 

OK then, so is there a difference 
between “undefined” and null? 

That one’s a little trickier. Yes, on a 
very technical level there is a difference 
between “undefined’ and null, but not 
really enough to worry about. Unlike null, 
“undefined” is not a value that you should 
ever think about assigning to a variable. 
There is an unde fined data type that 
variables automatically assume when they 
have yet to be assigned a value. On the 
other hand, variables are never automatically 
set to null. However, it's sometimes a 
good idea to set object variables to null 
as an initialization step to make sure it is 
clear an object has not yet been created. 



Nitty gritty technical details aside, the main 
thing to know about “undefined” and null 
is that they both convert to false when 
placed in a boolean context, such as the test 
condition of an if statement. That’s why 
code such as if (someObject) is 
often used to check if an object has been 
created before attempting to access its 
members. 

I still don’t quite understand how 
a typo somehow turned the average 
variable into undefined. How did that 
happen? 

Even though a variable named 
average had already been created and 
initialized, JavaScript has no ability to make 
the connection between averag and 
average just because they have nearly 
the same name. The variable averag 
could just as easily be named shazbot 
or lederhosen for all JavaScript cares. 
Which is to say that JavaScript interprets 


it as an entirely new variable. And since 
this new variable has yet to be assigned a 
value, it's a big problem trying to compare 
something to it in an if statement. It's like 
trying to write a movie review before you’ve 
decided what movie to watch. 

Are you kidding me? I make 
typo mistakes all the time in my word 
processor and it doesn’t break everything. 
Why is JavaScript so sensitive? 

Take a deep breath and commit these 
four very important and insightful words 
to memory: GET USED TO IT. We’re not 
writing scripts for people, we’re writing them 
for machines, and machines are anything 
but forgiving regardless of what language 
you're scripting in. Even one character in the 
wrong place can send a script over the edge. 
There is some flexibility in the whitespace 
surrounding JavaScript code, such as 
spaces and newlines, but the code itself 
must be very exact. 


Crunching the intelligence numbers 

With the typo bug under control, the IQ^ calculator script now works properly, calculating 
an average IQ from an array and then displaying the result as a text classification. Owen 
can close this case and bask in the glory of a job well done... but for how long? 




you are here ► 
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call now to win 




BULLET POINTS 


■ Although most browsers provide an error console that 
provides information about JavaScript errors, they can’t 
always be trusted as completely accurate. 

■ Even though browsers often yield sketchy error 
information, they do usually provide valuable clues 
about where to start looking for trouble. 


■ Curly braces around blocks of code are a common 
source of bugs—be careful to always match opening 
and closing braces. 

■ Simple typographical errors are easy to make but not 
necessarily easy to find—always check the naming of 
identifiers. 


The case of the radio call-in bugs 

Owen barely had time to celebrate his first closed case before another case 
lands on his desk. His new case involves a script that is intended to process 
call-ins to a radio station contest, determining a winner based upon the 
call number. The script is supposed to keep a count of callers and only 
declare a winner after a certain number of calls, such as seven. 
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Opening up the mvestigation 

Before firing up the radio call-in page in a browser, Owen thinks it’s worth 
taking a quick look at the code (available at http:/ / www.headfirstlabs.com/ 
books/hjjs/) and getting a feel for how it is put together. Maybe something 
will jump out that is obviously wrong, or maybe he’ll at least gain some 
understanding oOiav^hc 


Tlic o-P the dalles 
the ddll 
hurir»bc!r avc passed ih-to the 

alo% with -the -Pov-m object. 


The 乙 all 

^ouhtcir is 

io ZjC\TO. 


Cd\\ 6 ouir\*tcv-. 


Rcsei the dalles 

-field -Po\r 

ihe hCX-t dalles 

the\re ish't a wihh 


<html> 

<head> 

〈 title>BS 工 Case 2 


Winning 


Caller</title> 


〈script type="text/javascript"> 

// Total number of ca 丄 s 
var callNum = 0; 

function checkWinner(form, caller, 

// increment the call numbe 
var callNum; 

++callNum; 

// Check for a winner 
if (callNum = winningNum) 

"alert(caller + ", caller number 

form, submit ()； 


winningNum) 


+ callNum 


else 


Y/m 


七 i\)C usev- 
submit 七 he 
\( dall 

， bcv" c^udls 
\r\iAW»bcv". 


today’s winner ! n )； 


^ -Fnr the next caller 

"^Serfierd ^document. getElementByld (' caller - )； 

V c a a r H C er F iel"value = "Next caller"; ^ m ^od 

callerField. focus () ； -- * . 

callerField.select() 


</ 


: /script> 
</head> 


Lect o ； -fotus *to ^ elemeyrt 


sc*b *tKc 七 
ov\ pay. 


'> 


伽妒 me - ” callf _” action="radiocair.p h p" -t h od="POST-> 

Snput type-button" ===== dQcument . getElem entById ('caller >) -value, 7) 
onclick="checkwmner (this, torm, 

</form> 

</body> 

</html> 




: 忱 V 饮 sMyt (oy 

fcoHhg away the 
i _3 CaWc^r. 


ihc Call button is disked. 


c^|terpen your pencil 


Help Owen get a jump on the case by circling the number of 
bugs you think there are in the radio call-in script code. 


None 



Two 


Three 


Four 


Five 
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say what? syntax errors 


( _|jjarpen your pencil 

Solution 


Help Owen get a jump on the case by circling the number of 
bugs you think there are in the radio call-in script code. 


None 


One 


Two 


Three 


(^Four^) 


Five 


push 

Keif -f md a^d solve 

七 iiese -rouv- buy … 



A question of syntax validation (Pug # 1) 

With a general idea of how the code is supposed to work in mind, it’s time 
to turn to Firefox and see what actually happens when the radio call-in 
script is run. Similar to other errors we’ve seen, Firefox immediately 
reports a syntax error, which is a coding error that violates the rules of 
the JavaScript language. 


Syntax errors are 
always reportect hy 
browsers, assuming 
tkat error reporting 
is enatled. 


EjiiQr Cfitni^lc 


_ O 矗 O 

All Lrfriirp 




靈藝 j£ujC« 


um * mvh * 感叫如 pM ril/lunip| 叫 


M fhuhJliij ] hnf"l 

… vinn»rl # |i| 




^ r ss wiKn £ iif2iua |< 


6 ■■上 1 奶 an 




winner I "1 


tUiia i 

” BeBfrt th* j 

I^up Mi 

.■ Gn HflrPiB-iii. □O'l'sct j y < 


6 b 时 Kt e4j 


e-aXlur 

: Nr ■料 U 相 


TTiis C\r\ro\r points -fco 

3 <^p Codt with a 

stvihg dohdatchatioh. 


^Vb#Hd-' 


1 ■ 誔總： 


麵 w 味 hi 


Syntax errors always result in a browser notification of some sort, 
assuming the browser is set to report errors. This gives us a very 
important jumpstart in tracking down errors. 
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Careful with those strings 

Firefox pinpointed a line of code with a string concatenation, which 
is a clue to analyze the line of code very carefully. The code calls the 
alert () function with several string literals concatenated with the 
caller and callNum variables. 


if (callNum = winningNum) 
alert(caller + 


callNum + 


f Tiicsc b*io s*tvm^ l'i*tcv-als avc 一 
dor>da*tcv>a*tcd variables. 





Pairing up quotes is critical in JavaScript code. 

uotes must always appear in pairs, otherwise JavaScript wouldn’t be 
able to tell when a string ends and another one begins. In the case of the 
radio call-in code, one of the string literals in the string concatenation is 
missing its trailing quote. This is definitely a syntax error since it confuses 
JavaScript about where the string ends. 

To fix the bug, just add the missing quote to the end of the string: 


if (callNum = winningNum) 

alert(caller + ", caller numbe 

if (callNum = winningNum) 

alert (caller + ", caller number ’▼ + callNum + 

_Ri ❹ e 

in m stRinff 




today's winner!"); 


today's winner !，'）； 
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Quotes, apostrophes, and consistency 


Missing quotes are only half the story when it comes to tracking down 
quote-related errors in strings. Since JavaScript and HTML equally 
support both quotes and apostrophes for enclosing strings JavaScript) and 
attributes (HTML), it’s critical to be consistent when mixing the two. 


Quotes av-c used *to 
all d ' 
HTML att^ku-bes. 


<input type="button" value="Call 



onclick="checkwinner(this.form, document•getElementByld('caller')•value, 7)" / > 

V. Apos-tv-ophcs 3 \rc used bo 

^ Chdosc JavaS^\ript s-tv-'mgs 


This approach to using quotes for HTML attributes and apostrophes 
for JavaScript strings within attributes works perfectly fine, and is a good 
idea. However, it is also possible in HTML to reverse the two, as this code 
reveals:: 


<input type='button' value='Call' 


v/ithih a-t-tv-ibu-tc. 

TV^C mode 作 /HTML 

sta^avd docs^-b allov/ 

{jo be used -bo tu\ost attnbu 七 CS. 


onclick='checkwinner(this.form, document•getElementByld("caller n )•value, 7) * / > 



|^oy/ apos*tv"opiics a\rc used -for 七 
HTML atVibutcs artd quotes arc 
used (or JavaScript 士 ri 呼 • 


The idea here is to stick with quotes for one type of code, and apostrophes 
for the other type. And since the modern version of HTML, XHTML, 
requires quotes around attributes, it makes sense to stick with quotes 
around attributes and apostrophes around the JavaScript strings inside 
attributes. 

But a problem arises when you specifically need a quote or an apostrophe 
but you’ve already committed to one of them as the string-enclosing 
character, or string boundary. Consider the following code: 


Quotes and apostropkes 
skould te alternated 
wken using JavaScript 

strings in HTML 

attributes. 


alert('It's so exciting!'); 



pocs 七 Wis Code v/ovk? 





What happens when you specifically 
need a quote or an apostrophe 
character in a string that is enclosed 
using the same kind of character? 
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Whew a quote isn't a quote, use escape characters 

A common bug involves using a quote or apostrophe as a character within a string but 
having it interpreted as a string boundary. So the alert code we just saw is a syntax error 
because the JavaScript interpreter can’t figure out which apostrophes are boundaries 
and which are real apostrophes. Fortunately, there is an easy way to declare that a 
character is a “real” character. It’s called an escape character, and it involves placing 
a backslash (\) in front of the character to be used literally. 


alert(’It\'s so exciting! 1 ); 

Now the apostrophe has been escaped, and JavaScript knows without 
a doubt that we really want an apostrophe character in the string, as 
opposed to declaring the end of the string. Of course, we could’ve dodged 
the escape by changing the string boundary to quotes. 


alert ("It’s so exciting!"); 


ho 


Escape 
lohgeir heeded. 


That works fine, but what about this code: 


alert ("They said, ’’you’ve won !’"'）； 


Escape ckaracters are 
used to specily literal 
ckaracters in strings. 


The string contains literal quotes and a literal apostrophe, so escape is the 
only option available. In such a scenario, it’s usually safer to escape all of 
the literal characters, even though the apostrophe could get by without it. 


alert("They 






said, \"you\'ve won! 


Escape 
M) ; needed 
a ^ood 


Fix the quotes and apostrophes in the following code snippets, using escape characters 
whenever possible. 


var message = 'Hey, she's the winner!*; 


var response 

="She 

said, ▼ 

'工 can * t believe 工 

won."" 

<input type=' 

'button" 

1 value: 

^"Winner" onclick=' 

'givePrize("Ruby");" / > 
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exercise solution 



Fix the quotes and apostrophes in the following code snippets, using escape characters 
whenever possible. 

var message = 'Hey, she's the winner!*; 


va\r message — 'ttcy, shcVs -the 
The 

var response = "She said, ▼▼工 can' t believe 工 won."" 

.)i - --- ^ 

ha CS， to b .y?.^ y"CSporiSC ^ u Shc said ； V| believe I yjpY\\ w 

escaped s*mdc <input type="button" value= M Winner" onclick="givePrize ( "Ruby" ) ; n / > 

it appeals 

v/’rthm a *t ； yP c= 1 U*to〆’ value— 。的 dkk 二 ’’giv/cPviz^ORuby ’) 广 /> 

"br hj £staPC dhav*ad*tcv*s won ’ 七 y/ovk m 七 his dasc s'mdc *this J 

is a JavaSoft stv-mg msidc ar> HTML atbribute 

'" Mi>c*mg quotes d^d afostvofhes solves i\\t fvoblcm. 


Undefined isn't just for variables (Pug # Z) 

One bug is taken care of but Owen knows his work is not finished. The 
radio call-in script now starts up fine with no errors, but a click of the Gall 
button to enter a caller is all it takes to reveal another problem. And this 
one seems to have something to do with the checkWinner () function. 
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The usual suspects: the checklist 

With some debugging experience under his belt, Owen decides to run 
through his newly constructed checklist of common JavaScript errors. 
Maybe this bug will match up with one of the bugs he has already 
encountered. 




^theses. 


OY 


missihg 


The ^hcdklVihhcn 
-Puh^tioh is ohly 
\rc-pc\rchdcd 
•m the CoAt- 


•^issihj 


亡叱 ly biraecs. 


funct iQ<^^> CT ,r ller ， Winni _) 

/flnc^^ th^ll Hunger 
va.r c3.11Nuin; 

++callNum; 


// Check for a winner 
if (callNum = winningNum) 

alert (caller + % caller nu^er 

form.submit ()； 


+ callNum 


.today\' 


vl 


气 ^oie 0 y 

•misuse. 


^postirophc 


inner !”）； 




Hmmm. 


Lse { . • H f or the next caller 

callerField. value = ，’ Next cal , 

call^rFiBld.focus () r 

callerField. select ()； 


</script> 

</head> 

<body> — ” ” act ion="radiocall.phP" method="POST"> 

<f : g na :=，^^ tyPe="text- /> 

一 .— 曲 1 W — … . 一 i 

</form> 

</body> 

</html> 


dc 七 etbicm 
Aca 七 Acc 七 . 


0 




r^l^arpen your pencil 


Help Owen by checking the type of problem you think is 
plaguing the radio call-in script. 


Unmatched or missing curly braces. 


Unmatched or missing parentheses. 


Misnamed identifier from typo. 


Quote or apostrophe misuse. 


Some entirely new kind of problem. 
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(^Jterpen your pencil 

Solution 


Help Owen by checking the type of problem you think is 
plaguing the radio call-in script. 


Unmatched or missing curly braces. 


Unmatched or missing parentheses. 



isnamed identifier from typo. 



[uote or apostrophe misuse. 


Some entirely new kind of problem. 


TV^c 匕 is tailed v/rth a 

loy/evtase by aU\Atrsi - T\\t tyfo 

causes JavaS^ip-t bo 七 Wk eMtcVW\^0 is 

c^ivcly di^cv-c^ WW 七一’七 b ⑽ deWed. 匕二 Slr ^ ^uiircs 

Gil ■(» dhc^klVihhc^O. 





CORRGctlHff 

fjMHCtipH 

Hand typo 
S«ys Buff #^t 


— 


<input type="button" value="Call" 

onclick= M checkWinner(this.form, document.getElementByld('caller*).value, 7)" / > 


Everyowc's a wiwwcr (Pug # ?) 


With the pesky “undefined” typo bug taken care of, the radio call-in script 
is still triggering errors. The good news is that the browser is no longer 
reporting any problems. But the bad news is that every caller is now a 
winner — the script is even declaring them the correct caller number even 


when they aren’t. That’s a lot of prizes to give away if Owen doesn’t come 
up with a fix! 


呼 y 如， ^ih 9 is that 
芑 c humbev is bcih 9 showh a ： 

, c wihhih 9 仙州 beir cvch -thouah 

七 he ^allcir is^-t th c wmhi， 9 



Every tall is 
de^ldred a v/my\cr. 
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Alert box debugging 


We know that the test for the winning number takes place by 
comparing the callNum variable to the winningNum argument to 
checkWinner () function. But this code appears to be OK... we really 
need a way to look a little closer at what’s going on with the callNum 
variable. 

Ko*tW»^ obvious ou 七 as 

Code- 

if (callNum = winningNum) { 


V 




I 仏 wo^rth l\ryihg -fco lv-a^k -the 
value o-P dolll/Vurh -fco see how i-t is 
leading up -fco this dode. 



Alert boxes can te 
very kancty lor getting 
a quick look at tke 
value ol a variatle* 


Alert boxes can serve as a debug watch window. 

As it turns out, alert boxes aren’t just for displaying pop-up information 
to end users. They can also be useful purely on the development side of 
JavaScript code as temporary watch windows for looking at variables. Not 
only that, but alerts can be used to make sure a certain section of code is 
getting called as expected. In this case, we need to use an alert simply for 
keeping an eye on the callNum variable. 

TKc alert bo% ^ovidcs d 
oy\ *tV^c vav-'iablc s 
* m cast *tKc value o+ 
c.allKuw' variable. 
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Watching variables with alert 


A watch is a debugging term that refers to constantly watching 
a variable as a program runs. An alert provides a primitive 
watch that isn’t exactly a constant view of a variable but can still 
be very helpful. An alert can be used as a watch anywhere in 
JavaScript code where a variable is in question. 


Somcthihg ish’t v-ijht... 

should be set -to the 
humbeir the ta\l 



Owen realizes that the radio call-in script is somehow seeing callNum 
and winningNum as equal, even though callNum is showing up as NaN 
just before the if statement. While it’s already confusing that callNum 
is coming up as NaN, he decides to move the alert just inside the if 
statement to see if anything changes. 



Bingo! I think I 
figured it out. 

O 


TKc dallNum vaviablc is y \ o^i 
up sc*t bo 1 jus 七 
i-f test doy>d*itior\al 


7 



f <wc i 





With the alert watch confirming that callNum is 
somehow miraculously getting set to 7 within a 
single line of code, what do you think is the cause 
of the bug? What has Owen figured out? 
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Dckuggiiftg with Alcvt 

This week’s interview: 

Alert shares his disdain of bugs 


Head First ： I have to admit, I’ve heard mixed things 
about you. People say you can be really annoying. Yet I 
hear you could very well be a debugger’s best friend. Can 
you enlighten us on who the real alert is? 

Alert ： Those first people are crazy. I’m a wonderful guy. 
I’m also pretty simple — you give me some information 
to display, and boom, I pop up and display it. That’s it. 
Where’s the harm in that? 

Head First ： I guess it’s the “pop-up” part. Pop-ups have 
gotten a bad rep as of late with all the ridiculous ads that 
sometimes pop up everywhere. 

Alert ： Oh, I gotcha. Yeah, I can see where that could 
get really annoying. But you can’t go around blaming a 
hammer for a dimwitted carpenter who doesn’t know how 
to use it. See what I mean? 

Head First ： So you’re saying that any bad things I’ve 
heard about you have to do with you being misused? 

Alert ： There you go. Like I said, I just do as I’m told. You 
tell me to pop up a whole bunch of times with silly ads, 

I’ll do it. I’m not saying I’ll like it, but I don’t really have a 
choice in the matter. Hey, I thought you were going to ask 
me about my contribution to the world of debugging. 

Head First: Oh, I’m sorry. Yes, I have heard some really 
good things about how you help JavaScript developers 
track down bugs in their code. How do you do it? 

Alert ： It’s pretty simple, really. Let’s say there’s a 
variable that has gone haywire, getting set to some value 
that makes no sense. The programmer is freaking out, 
overcaffeinated, you know what I mean, and desperately 
needs a way to take a peek at the variable at different 
places in the script to see how it’s getting changed. So she 
asks me to pop up and show the variable. 

Head First ： But how are you able to show the variable 
change value at different points in a script? That sounds 
difficult. 


Alert ： Not at all. All you do is call me multiple times, with 
each call at a different point in the script. 

Head First ： I see. Have you ever run into any problems 
when helping out as a debugging tool. 

Alert ： Well, I have to admit that I’m not so good at 
popping up debugging information when there is a piece 
of code getting run a bunch of times, like in a loop. 

Head First: Why is that? 

Alert ： Well, remember that I am a pop-up window, so I 
have to be clicked to go away. If I’m popping up a bunch 
of times, that’s a whole lot of clicks. 

Head First ： That makes sense. I also hear that you can 
be handy even when there isn’t data to be looked at. 

Alert ： Oh yes. There are plenty of situations where it isn’t 
quite clear if or when a piece of code is getting called. A 
quick call to me within the code will let you know if the 
code is really getting called. I become somewhat of an 
alarm just to let you know if code is called. 

Head First ： In all of these debugging scenarios, are you 
telling me you are just temporary? 

Alert ： Oh, absolutely. And I don’t mind. It’s not like 
I don’t have my permanent role as well — I just do the 
debugging thing on the side as a little public service. 

Head First ： Well, I appreciate you taking the time to 
explain your role in bug detection. I look forward to seeing 
you around. 
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is it logical? 


Pad logic is legal but buggy 


Owen has honed in on a logic error, an error that is perfectly legal 
according to the rules of JavaScript but entirely wrong in terms of what 
it is intended to do. In this case, = is used instead of ==, which means 
winningNum is getting assigned to callNum instead of being 
compared to it. Subtle? Yes. But still highly problematic. 

… ^ 

if (callNum(=^)winningNum) { 


if (callNum == winningNum) { 



The real problem with this error is that it doesn’t trip up the browser and 
generate an error like the syntax errors. The JavaScript interpreter didn’t 
complain because an assignment “returns” the value being assigned, in 
this case winningNum, which is then automatically converted to true 
(non-zero) in the if test condition. In other words, the code is perfectly 
legal even though it didn’t do what we wanted it to. 


The todt -that “looked” 
0 ^ ca\rlic\r tuv-hcd out to 
have a subtle bug -that 
Ws di-Pf idu|-t {jo spot. 



..考 

CH3H 獅 

，二去 P :: 

I Mverizes 

Buff #3, 



So logic errors don’t 
ever show up in a 
browsers error console? 



Logic errors like to fly below the radar. 

What makes logic errors such a pain to deal with is that they often don’t 
reveal themselves the way that syntax errors do. Although a script error in 
a browser may seem a bit deflating, it’s really a blessing in disguise because 
it’s a bug that has been detected for you. Logic errors don’t violate any 
JavaScript syntax rules, so they are often tougher to detect. 

On the other hand, logic errors do sometimes result in a script error 
while a script is running. For example, if a logic error results in a variable 
not getting initialized, an “undefined” error will show up when the script 
tries to reference the variable. So sometimes a logic error will spare you 
the suffering of an exhausting bug hunt. 
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BULLET POINTS 一 

■ Syntax errors involve code that 
violates JavaScript language rules, 
and are usually caught by the 
JavaScript interpreter. 

■ Strings must be carefully enclosed 
within matching quotes or 
apostrophes. 


Are escape characters only used 
for escaping quotes and apostrophes? 

No, there are several escape 
characters supported by JavaScript. For 
example, you can use \t to insert a tab into 
a string. Similarly, a newline is represented 
by the \n escape character. And a literal 
backslash must also be escaped with \\. 

One place where escape characters can 
be used effectively is in formatting the text 
displayed in an alert box. You can use \t 
and \n to align text using tabs and control 
how it flows onto new lines. 

Q/ What’s the deal with the limitation 
on escape characters in HTML attributes? 

The limitation has to do with the fact 
that HTML attributes aren’t subject to the 
rules of JavaScript, at least not when it 
comes to the characters used to bound an 
attribute value. So while it’s fine to escape 
a character within a JavaScript string that is 
enclosed in an HTML attribute, it can’t be the 
same character used to enclose the attribute. 

If this is still confusing, think about it like 
this. HTML sees an attribute simply as a 
value that must appear between quotes or 
apostrophes. Nothing more. So whichever 
boundary character you use to start the 


■ Quotes and apostrophes should be 
mixed (but still in matching pairs) 

in HTML event handler attributes 
that contain JavaScript code. 

■ Alert boxes offer a primitive 
but useful option for watching 
variables throughout a script. 



attribute, HTML assumes the next one 
it encounters is its matching partner that 
closes the attribute value. This happens 
because HTML doesn’t process the attribute 
value for JavaScript escape characters. 

Escape characters do still work within an 
HTML attribute, provided they don’t conflict 
with the character used to enclose the 
attribute. This is because the attribute value 
does eventually get interpreted as JavaScript 
code, assuming we’re talking about an event 
handler attribute. 





Aren’t there fancier debuggers for 
JavaScript that provide detailed control 
over the debugging process? 

Yes, there are a few out there. And 
it’s not a bad idea at all to investigate them 
further and consider trying one out. However, 
understand that good coding habits coupled 
with the debugging techniques explored 
in this chapter will go a long way toward 
helping you create error-free scripts. 


■ It’s a common error to accidentally 
code a test condition with = when 
you really mean ==. 


What exactly is happening when 
JavaScript code tries to reference an 
undefined variable or function? 

Remember that an undefined variable 
is a variable that has either not been created 
or that has been created but not set to 
anything. In both cases the value stored in 
the variable is unknown, or more specifically, 
it is undefined. So attempting to read that 
value and do something meaningful with it 
makes no sense, which is why JavaScript 
generates an error. 

A similar situation occurs with functions 
when a function is called but the JavaScript 
interpreter can’t find a function by that name. 
The function is undefined, which means that 
calling it makes no sense—there’s nothing to 
call. Again, JavaScript considers it an error 
because there is no way to meaningfully 
execute the code. 

What’s the deal with the callNum 
variable turning up as NaN before the if 
test condition in the radio call-in script? 

We still don’t know. Although it does 
tell us that something is still amiss in 
the script code. So it’s important to keep 
sleuthing for more bugs... 
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syntax error vs. logic error 


Fireside Chats 



Tonight’s talk ： Syntax error and Logic error share their love 
of poor scripting 


Syntax error: Logic error: 

Hey, I’ve heard of you. I hear you’re pretty sneaky. 

But what I’m wondering is if you enjoy a really 
badly written script as much as I do? 

Oh yeah. There’s nothing better than a script that 
looks fine on the surface, but just barely out of sight 
are all kinds of strange problems. 

I disagree. I like scripts that are a train wreck right 
there in plain view. That’s where I excel. You 
sprinkle a few of me throughout a script, and it’s 
guaranteed to make a browser squeal in pain. 

But what fun is that? Everybody knows a sneak 
attack is much more effective. You know, lull them 
into thinking everything is OK, and then slowly 
start revealing little problems here and there. If 
you do a good enough job, they’ll be questioning 
whether or not their browser is even working right. 

I can appreciate your twisted way of seeing things, 
but the problem is that you still allow a script to 
run. That’s no good to me. I like to stop it dead in 
its tracks. 


You’ve got a point there. It’s a shame I haven’t 
figured out a good way to reveal myself by stopping 
a script like you do. Or even better, crash the whole 
browser in a big puff of smoke. That would be cool! 


It would, but we’re unfortunately pretty limited in 
terms of how much damage we can do. Sure, it’s 
fun to screw up a page and keep it from working 
right, but I hate that we can’t get access to anything 
else. Boy, what fun I could have with a hard drive 
full of important data! 


Oh man, that would be incredible. You sure there 
isn’t an angle for us to get in there? 
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Syntax error: 

Nah, the JavaScript interpreter has us locked down 
pretty tight. 

No, how does it work? 


How do you get away with that? 


I have a good one sorta like that where people 
forget to end each JavaScript statement with a 
semicolon. It’s great because the interpreter will let 
it slide if the statements are on lines by themselves. 
But eventually some cocky programmer will try to 
“optimize” the code and combine the statements 
onto a single line, and that’s when I show up. That 
one never gets old — I always get a good laugh! 


I love it because if the interpreter does notice, then 
I get to spring into action and shock them with an 
error. Hey, I’m starting to realize we should think 
about teaming up — I think we could do more 
damage that way. 


Logic error: 


Well, there’s still plenty of fun to be had. Did I tell 
you about my little trick with = and ==? 


It’s great. The programmer means to type == to 
compare two values, but they accidentally type = 
and it does an assignment instead. It’s hilarious 
because they’ll go hours without seeing the problem. 
And the JavaScript interpreter is none the wiser 
because the code is still technically legit. 


Oh, I have loads of them. It’s a fine line I walk 
being just inside the law but still able to stir up 
trouble. 


Hey, that reminds me of one more I have to share. I 
love it when people decide to change the arguments 
to a function after they’ve written the function. 

It never fails — they’ll forget to change all of the 
calls to the function, which all are supposed to be 
updated to match the new arguments. If all goes 
well, the interpreter won’t notice and they’ll get 
unexpected results from the bad arguments. 


I agree. Let’s get started. 


I’m right behind you! 
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really buggy radio 


Evcryowc's a loser! (Pug # 4) 

Owen is starting to realize that this debugging stuff is not as easy as he 
once thought. With the if statement logic error fixed, now the script 
never declares a winner. So we went from everyone being a winner to 
everyone now being a loser. Some people’s self-esteem will definitely be 
affected by this bug if Owen doesn’t get it fixed quickly. 


Callcv- 
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Overwhelmed by annoying alerts 


Owen attempts to use alerts to put a watch on the callNum variable and 
try to figure out what’s going on. However, he runs into a problem in that 
it gets tedious having to wade through so many alert boxes en route to the 
seventh caller. He’s tried using several alerts in different parts of the code, 
but he’s just getting overwhelmed with so many less than helpful pop-up 
windows, and doesn’t know where to start... 


丁 he d\rawbadk -to alerts as watdh 
wihdows is that ihey ^ get 
^ Odious whch used ih v-epetitive dodc. 



As the tails \roll ih, -the 
Gin variable jumps 
%ouhd bc-twcch all kihds 
° + wci\rd Values. 



Wouldn't it be dreamy if there was a 
way to watch variables without having 
to go through a pop-up window... 
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there } s a console for this? 


Prowser debugging consoles caw help 


Most browsers have a debugging console, really an error console, that is 
responsible for displaying errors that occur in a script. Error consoles are 
very useful for finding out when something goes wrong in a script, and 
in many cases helping to diagnose exactly what went wrong. Firefox in 
particular has proven to have an excellent error console. 







« 1 


Error consoles don’t really help at all when it 
comes to watching variables. 

As handy as error consoles may be, they don’t offer any means 
of watching variables. But there’s good news — it’s not outside 
the realm of possibility to create your own debug console 
from scratch that can serve as a watch window. 




^Ohsolcs a^Tt Ofrcai 
4*o\r Tihdih 0 out dbou 七 s 匕 vip 七 
cspc^i^lly ciriroirs. 


cvv-ov-s. 
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Error consoles are great 
and all, but how do they 
help me watch variables? 
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Puild a custom console for debugging 

The idea of a custom debug console might sound intimidating at first, but 
all it really has to do is display text when asked. The key is that the console 
must display the debug information directly on the page, not in an alert 
box. A separate pop-up window could be used as long as it doesn’t require 
the user to click OK, but it’s simpler and just as effective to show the 
debug messages directly on the page. 



area on the page. Draw what you think the necessary components of 
this design are, and how they fit together, including a custom JavaScript 
object for the debugging console. 
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sharpen solution 


(^Jterpen your pencil 

Solution 


丁 he dcbu^ih^ dohsolc is 
desired as Bv\ object hdrvted 
DcbugCohsolc that has ohc 
f\ropc\rty ahd Ohc method. 


DebugConso 


Imagine a design of a JavaScript debugging console that allows 
Owen to display debugging messages in a list within a dynamically 
created area on the page. Draw what you think the necessary 
components of this design are, and how they fit together, including a 
custom JavaScript object for the debugging console. 



i-acM dall bo dus-fcom displayMs^O 

mei^od dvav/s a debu^ messay 。的 a 
Y\t^i I'me tiic debu^ tov\so\t av-ca- 


The debu^ dortsole itsd-f i! 
^v-catcd oy\ the pay as a div. 


The shaded pv-opev-ty 
|S a booled^ that 
3士 "toggled between 
"bruc dhd -false -Pov- 
debug 

■to altc\rhatc -the 
ba^kgv-ouhd to\oY. 


"The liTAIL clcrwCh-ts -Pov* "the 
debug a\rca oy\ -the pa^e av-e 
dyhami^lly by the 
debug dohsolc, whidh meahs -the 
usev" doesh t *fco ihdlude Sv\y 

liTAIL todt "fco suppov-t 
the debug ^ohsole- 
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JavaScript Magnets 


The code for the debugging console is missing a few pieces. 
Fill in the blanks with the code magnets to finish building the 

DebugConsole object. 


function DebugConsole() { 

// create the debug console area 


var 


consoleElem = document 


consoleElem.id = "debug* ; , 
consoleElem.style.fontFamily = "monospace 
consoleElem.style.color = "#333333"; 


document.body. 
consoleElem• 


(consoleElem) 
(document• 


// create the alternating background color property 

=false; 


("hr")) 


this . 


DebugConsole. prototype.displayMsg = function(msg) 

// Create the message 

var msgElement = document. createElement( div ), 


msgElement.appendChild(document. . 

msgElement.style.backgroundColor = this.shaded r 
var consoleElem = document.getElementByld(. 

consoleElem. appendChild ( ) ’• 

// Toggle the alternating background color property 
this.shaded = this.shaded; 


(msg ))； 
'▼#EEEEEE 


n #FFFFFF' 


div ， 


msgElement 


debug' 


createTextNode 
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JavaScript Magnets Solution 

The code for the debugging console is missing a few pieces. 
Fill in the blanks with the code magnets to finish building the 

DebugConsole object. 


function DebugConsole() { 

// create the debug console area 


var consoleElem = document. 

consoleElem.id = "debug "； 
consoleElem.style.fontFamily 
consoleElem.style.color = "#333333 


createElement 


div' 


)； 


document.body 

consoleElem. 


appendChild I (consoleElem) 


nc debug console div is appended to 

monospace"; body, ii 

yts added "to the end d the pa^e- 




: ument. 


createElement 


// Create the alternating background color property 

false; 丁 k badkyou 的 d Co\oy s*ta\rts 
out -false, y/hidh results \v\ d 


this . 




whrte bddk^rou 灼 dl mi 七 ially” 


hoV"iiorrta| \rulc "to divide 
the do^solc messages -fv-o» 
the v-cs-t o( the 


DebugConsole.prototype.displayMsg = function(msg) 
// Create the message ”、 

var msgElement = document. 


createTextNode 


msgElement.appendChild(document. 
msgElement.style.backgroundColor = this.snaae 
var consoleElem = document. getElementByld (j 

consoleElem.appendChild( 


A v^essa^e is added 

-bo debu^ Cov\so\t 

遍、 ,as a 乙 Wild dw. 

(msg ))； 

fEEEEEE" : n #FFFFFF M ； 



msgElement 


// Toggle the alternatin^^^^^^^W° r property 


'debug' 


this.shaded 


tiiis . shaded, 


The 

乙 olov altcv-hatcs 

bctwcch each 
message so that 
the messages a^t 
casiev- -fco \rcad. 
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Pebug your debugger 


Owen can’t wait to put the new debug console through its paces to find out 
what’s still wrong with the radio call-in script. So he imports the debug. j s 
file into the page and creates the DebugConsole object in the head of the 


page. 


<script type="text/j avascript，’> 


// Debug console global variable 


var console = new DebugConsole(); 



TV^is CoAt £.V"C3*tcs 
PcbujCo^solc object as a global 

vav'iaklc m fay. 



Unfortunately, things don’t go as planned. When he first attempts to use 
the debug console, Owen learns that he has compounded his problems by 
introducing an entirely new bug of his own into the new debug console. 


#8 O 

o 

All EjTDrs 


£rnor CQ^iole 


门 


Warfirngs 


y 丨 darijmi-nKbfidy hd% ran 

如 … ㈣ 训沿咖 F ㈣ I 伽耐 nn/headfi 叩 Hr—p i 〖 也刪，代叫 針旧 ^ 


Evaluoct 


Unc 


I don’t understand how the 
document body doesiVt have 
any properties. Doesn’t it hold 
all of the web page content? 


丁 bv"oy/scv* is £.l3iw>nr\^ 七七七 he 
do 乙 _ ⑶七 body V^as y\o pvofcv-tics. 



I 七 seems ar\ 

l'm*tv*odutcd 

m*to 
strict •• 



The line of code that generates the error is just trying to append a child 
node (div) to the body of the document, which shouldn’t be a problem. 

document.body.appendChild(console); 

Something else is amiss, although it definitely appears to have something 
to do with the new DebugConsole object. 



What could possibly be wrong with this code to cause 
the document body to somehow end up empty? 
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watching the time roll away 


Waiting ow the page 


The problem with the debug console has to do with the timing of how a 
page loads and when script code has access to the body of the page. 


T\\t Kcad <^f pay 

loaded bc-fovc body, so 
y\oY\t oi *tiic body 6 。灼七伙七 
is available ai 七 his pomt 


TV^c HTML clcmcn*b *t^at 
actually v-cs'idc ov\ *tVic \>a^c 
av-c^t loaded until body 
loads … a-fW i\\t V^cad- 


<htr 


Ah, so script code that 
runs in the head of the 
page can’t access HTML 
elements on the page. 






^head> 

<title>BSl Case 2 


Winning Caller</titl e > 
tYPe= " teXt/jaVaSCript " —"debug. js -></ script> 

<script t ype="text/javascript"> 

// Debug console global variable 

Var C ° nSOle = new DebugConsole ( r ； 

// Total number of calls 

var callNum = o; 

function checkWinner(form . 

// merest the call 2^e r ( 

var callNum ； 

++callNum; 

// Check for a winner 
if (callNum == winningNum) { 

S Srt(C ! ller + caller number " 

form, submit () / 

else { 


callNum + "... t oday\ 


winner! 11 ) 


next ca ller 

callerField.value = ''nL\ ( ')； 

callerField.focus ()； ? 

I callerField.select ()； 

</script 〉 

^</head> 

/ <body> ___ 

Caller name: <i n put ” 

〈input typ e =-'button" value="Call"/> 

咖祕赠 （ thls . fQrm , 如獅 t. 喊 ！ 咖 tBy 卿。灿 匕 

</html> 


method=’’POST n > 
type="text' 



JavaScript code that executes in the head of the page 
doesn’t have access to web page content. 

Since the head of a page is loaded before the body, any script code that 
runs directly in the head of the page must be careful not to attempt to 
access any HTML elements that are in the body of the page. This may 
seem like a strange restriction, but it makes sense when you consider that 
not all that much code is typically run in the head of the page. 
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But what about functions 
that appear in the head? 
Aren’t they wrong too? 


Not all code in the head of a page is executed in the 
head of the page. 

Placing code in a function that appears in the head of a page is not the 
same as running the code in the head of the page — function code 
doesn’t run until the function is called. But code that is placed outside of 
a function is executed immediately when the header is loaded. This is the 
code that can cause problems. 

In the case of the DebugConsole object, it can’t be created directly in 
the head of the page because its constructor is very much dependent on 
content in the body of the page. 



— your pencil 


Write down when and where you think the DebugConsole 
object should be created to make sure that it can safely access 
elements on the page. 
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(^Jterpen your pencil 

Solution 


Write down when and where you think the DebugConsole 
object should be created to make sure that it can safely access 
elements on the page. 



The b\roy/sc\r lc*ts us kr\ov/ d pajc hds -finished loddrn^ by -fiv'mg 
onload So DebugConsole object should be Cctd^tA m response h> 

ihc onload cyc^t ttov/cycv；, *t]Kc do^sojc y3y*iablc should sfcll .Ipc.dcdarcd m 
■the head of /the so the object is global - we jus*t /talj jthc 

女 ?. ^d'tudlly. tv ； coi*tc the objcd*t *thc # onload cyc^*t -fiyes- 


咖 vinff ttie cReatiPH :p 辛 <body onload="console 

t «6 DeBuffCoHSow pBject 

Mutates ine 喊 uff 
矽咖 Buff 



new DebugConsole();"> 

The Pcb^Co^solc obje^i >s 
”。 y/ Co^brUitd m resist 


•bo 七 he onload event 


The peskiest errors of all: ruwtimc 

The unloaded document body problem is an example of a runtime 
error — an error that only shows its face in certain conditions while 
a script is actually running. Sometimes runtime errors only surface 
under very specific circumstances, such as a certain type of user input 
or a certain number of loop iterations taking place. Runtime errors are 
often the toughest errors of all to find because they are so difficult to 
predict. Sometimes it’s a challenge just reproducing a runtime error when 
someone else encounters it. 


Runtime errors 
occur only because 
oi specilic conditions 
tkat take place wkile 
a script is running. 



The debug dohsolc bug wds 
3 \ruhtimc C\r\ro\r Mused by 
attcruptmg -fco 3£ ， 6ess data 
bc-Po\rc i-t had beeh loaded, 
is issue is ohly 
revealed whe^ a s^v-ipt is nm. 
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The JavaScript bug trifecta 


Along with runtime errors, two other errors we saw earlier round out the 
JavaScript bug trifecta: syntax errors, logic errors, and runtime errors. 
Any of these kinds of errors are capable of manifesting themselves in 
any script, often at the same time! Understanding their differences is an 
important part of being able to successfully find and eradicate them. 




Runtime error 

An error revealed only by runtime 
conditions, such as the user entering a 
certain kind of data into a form that 
the script can’t handle or attempting 
to access an object before it has been 
created or initialized. 


Syntax error 

An error resulting from a violation of 
the rules of the JavaScript language, 
meaning that the code is unfit to run in 
the JavaScript intepreter. 


Logic error 

An error caused by bad logic, often 
involvmg code that is intended to do 
one thing but is accidentally coded 
to do something else. Some code 
wnh logic errors performs exactly 
as intended, in which case the 

programmer misunderstood the task to 
卩 n with. 




Write down the type of error for each of the following error descriptions. 


ExettciSe 


Missing parentheses around the test condition of an if statement. 
Forgetting to initialize a counter variable to 0. 

Creating a loop that loops beyond the last element in an array. 
Forgetting to close a function with a closing curly brace. 


you are here ► 


525 















exercise silution 


E%ettctSe 


Write down the type of error for each of the following error descriptions. 

Missing parentheses around the test condition of an if statement. ..... 
Forgetting to initialize a counter variable to 0. ... .… 

Creating a loop that loops beyond the last element in an array. ... 

Forgetting to close a function with a closing curly brace. … . 


The call number is showing 
up as ''not a number.” 
Thafs pretty strange... 


O 


Ifs wot a wum-bah 





With the debug console finally up and running, it’s now possible to take 
a look at the callNum variable as the calls come in without having to 
sift through all those alerts. And as it turns out, an old problem Owen 
ignored has finally come home to roost. The callNum variable is 
showing up as NaN, which means it isn’t a number. But why isn’t it? 



console.displayMsg("callNum: " + callNum) 


A sm^lc I me Code 
sets uf a y/a*t^ ov\ 
*tV)c callNum variable. 


M least -the deb% 

^OhSolc is wovkih^ 
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Whew watchiwg isn't enough 

Sometimes watching a variable creates more questions than 
answers. Why is callNum not a number? Why is it not getting 
incremented? What’s the point of this debug console if it only 
confirms what you already know...that there’s a problem. So how 
do we go about finding out specifically what it is? 


What now? 



Removing code is a great way to simplify 
a script while hunting down bugs. 

Sometimes less is more when it comes to JavaScript 
debugging. In this case, removing code and watching to 
see what changes is an excellent idea. But just deleting 
code doesn’t sound all that appetizing since the vast 
majority of it will remain as is when you’re finished 
debugging. We really need a way to disable code, as 
opposed to truly removing it. 
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crippled by comments 


Comments as temporary code disablers 

Hiding executable code inside comments is an extremely handy way to disable the 
code while debugging. This allows code to be selectively pulled out of the execution 
of a script without actually deleting the code. Think of commenting out code as a 
means of subtracting lines or chunks of code as needed to help isolate a bug. 


function checkWinner(form, caller, winningNum) { 

console. displayMsgC'callNum: " + callNum); 


Comments are 
extremely useful 
lor temporarily 
ctisatlintfcocte. 


// Increinent^he call nuinber 
var callNum; 

++callNum; 


caller number " + callNum + 


// Check for a winner 
if (callNum == winningNum) 
alert (caller + 
winner !")； 

form.submit(); 

0 ]_ s 0 { I 

// Reset the cafller field for the next c 二 |er 
var callerFiem = document. getElementByld ( caller , 
callerField.^alue = "Next caller"; 
callerField/Tocus(); 

callerFie^a.select(); 


today\'s 


Hey, the call number is now showing 
up as 0. So something in the disabled 
code is turning it into、、not a number/ 1 


O 

o 




0 ^ rv 


E&l Case 2 ; Winning Caller 






h 


This rwultilihC dommehi 
disables cvcmythihg ih the 
-Puhdtioh but the todt that 
displays -the debu^ 

T\\t tallNum variable 
is y\ov/ O) 

m *t^C disabled 

to&t IS *brasW3 it 


❿ 


Calkr name: 


Cdll 


callMijou 0 

亡 nllMunu 0 

nn13Hum3 办 
ffiillWusi d 
s n11Nuraf 0 


Dn?ne 



What do you think will happen if only the line of code 
that increments the call number is added back? 
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Problem solved...sort of 




By switching to single-line comments, it becomes possible … 一』 
selective about the code that is disabled. If the line of code that 
increments the callNum variable is added back, the callNum variable 
starts working as it should. So one of the remaining lines of disabled code 
is causing the problem. 


av-c used so ■* 

mdividudl Imcs be 

enabled av\d disabled- 


function checkWinner(form, caller, winningNum) { 
console.displayMsg("callNum: " + callNum); 


// Increment the call number 
// var callNum; 

++callNum ; 〈 


// Check for a winner 

if (callNum == winningNum) { 

alert (caller + ' caller number 


七 ^ mdrewen 七 

l*mc Codt VmallY yts 
tallNum va/ialolc 叫。士 ，. 


+ callNum + 


todayV s 




BSI 


Cis-e 2 ; Winning Caller 


for the next caller 
5nt•getElementByld('caller'); 
【t caller"; 


Caller name; 


C^lll 


cbIINubu 1 

c.n 11 Nun 2 2 左了 
cm I’ll Muni 5 
MuKii ^ 
rnl SHum-: S 


Dune 


丁 he ^all/Vurw variable -Pmally 
wo\rks like its supposed io, 
ih^VCrwCh-tihg with ull. 



Write down what’s wrong with the callNum bug in the debug 
console, along with how to fix it. 
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sharpen solution 


(^Jterpen your pencil 

Solution 


Write down what’s wrong with the callNum bug in the debug 
console, along with how to fix it. 



variable dallNum is addide^-bally dreaded as a lodal variable 
usrng va\r 'mside t\\ttVW\Y\Y\CrO So callNum lo^al variable 

w hidcs w -the daljNum global yariablc, dy*ca*ti^ a sub*tjc py*objcm -to dc-tcdt S'mdc 
■jthc I odd] ya\riablc ^ • 七 • 和 4 /to. 

/the y/mriih^ »}umbc\r \rcsul*U m U ho*t a iryumbcv* ; w The is bo jus^t \rcmoyc "the 
I'me 'mside -fu^dtio^ -that ^v-ca*tcs *thc loddl ddllKum vairidble v/i*tii vav. 


t«e Lm 

飾 e tHat crates 
—LOcdL V3Ri 咖 

pB^iteRates M 


// Increment the call number 

var oallNum; 



By verwovm^ Imc of toAt 七 1 ^七 
a^idcn*tally tv-catcs a lodal variable 灼 a^ed 
tallNum, *tiic -fur>t*tior\ uses *tlic global 
ddllNum vav-idble, as ovi^mally mtcr\dcd. 


The dangers of shadowy variables 

The callNum bug in the radio call-in script is an example of a shadow 
variable, which is a variable that accidentally hides another variable with 
the same name. The problem arises when a local variable is created with 
the same name as a global variable. JavaScript creates the local variable 
and gives it precedence in the local block of code. So any changes made 
to the local variable do not carry over to the global variable — the local 
variable effectively casts a shadow over the global variable, temporarily 
hiding it from the script. 

global 


A skactow variable 
occurs wken local 
and global variables 
are created witk tke 
same name … not gooct! 


variable. 


Lodal 
vav-iaklc 



Global code 



Local code 


TWis Codt 

^lobdl vav"i3blc> 

^sultmj m ^ This Codt lo^al 

vav-iablc, \rcsultmg \y\ I - -the 
global variable is shadowed 
3hd \remol'ms 
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When commenting out code to track down bugs, how do I 
know how much code to disable? 

This is a judgment call that you’ll get better at as you get 
more experienced with JavaScript debugging. However, it's never 
wrong to err on the side of disabling most, if not all of the code near 
a problematic area of a script. And if a really nasty problem arises, 
don’t hesitate to disable all of the script code on a page. And also 
don’t forget to temporarily remove any import tags that pull external 
code into the page. 

There is another approach that can work if you’ve already isolated 
a bug to a particular section of script code. This approach involves 
disabling a line of code at a time until the bug goes away. So instead 
of disabling everything and slowly enabling code until the bug 


appears, you slowly disable the code a line at a time until the bug 
disappears. The former approach works better if you’re clueless 
about where a bug is located, while the latter approach works better 
if you've isolated the bug’s location to some degree. 

Q/ What if I intend to create a shadow variable? Is it OK then? 

That’s like asking if you intend to break your leg, is it OK? 

And the answer is no. Just because you deliberately bring pain 
and suffering onto yourself doesn’t somehow make it acceptable. 
Besides, there’s plenty of hurt to go around in debugging code that is 
intended to work perfectly, so you shouldn’t be gunning to up the risk 
factor deliberately. So the real answer to the question is that shadow 
variables introduce such confusion and sneakiness in JavaScript 
code that they should be avoided in all situations. 



Case closed! 

With a healthy dose of patience and some help from his new debugging 
skills., Owen closes the case and bags a promotion to JavaScript Detective 
at Bug Scene Investigators. 


Pc 七 cttWc 


till 1 Mum j i 

pn 111 Miami 令 
ealiaufiii ' 


Alan, caller number 7..today s winner 1 


□K 




The bug \radio dall-i 
s^\rip-t is Complete with 3 

wovkihg debu^ dohsole- 
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handy dandy checklist 


一旁 


Owens bog-sqciashing chccklis 

Make sure parentheses are always matched in pairs, 
matching pairs of ccinly braces. 

osed consistently. 


apostrophe (\). 


會 


N pXb^^^e e r^^ 

work as intended. 

Make scire an object has been created before affempfinq to 
global onl nesolting in sonoe very cinpnedictable behavior. 
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JavaScriptcross 

Before you turn your newfound respect of bugs into 
an ant farm purchase, try your hand at this puzzle. 



Across 

2. Use this to quickly take a peek at a variable. 

4. Use apostrophes mixed with these when placing JavaScript 
strings in HTML attributes. 

7. The special window browsers use to display errors. 

10. An error that violates JavaScript language rules. 

12. An error that gives the wrong result despite being perfectly 
legal in JavaScript. 

13. A variable that hasn't been assigned a value is. 

14. The custom object Owen created to battle bugs. 


Down 

I. Use these to temporarily disable code. 

3. Make one of these on a variable name and there will be 
problems. 

5. The current Web browser of choice for JavaScript debugging. 

6. Miss one of these surrounding a block of code and you'll have 
trouble. 

8. The number of bug fragments allowed in a chocolate bar. 

9. An error that only reveals itself when a script is running. 

II. Use this to code special characters in strings. 
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JavaScriptcross solution 



JavaScriptcross Solution 
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kill bugs dead 



Fold the page vertically 
to line up the two brains 
and solve the riddle. 





V 嫩 


Wkat do all JavaScript Lugs deserve? 


I Vs d o-f m’mds, <r 





Turning tke otker ckeek is an 
erroneous approack tkat migflit overload 
your tolerance lor Imgfs. Tke overall 
ickiness oi Imgs will cause tke ctetilitation 
oi your code，wkick is a protlem. 
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12 dynamic 


餐 



boiVt let my eyes fool you 


Behind this pretty face 


is 


raw 


emotion just waiting 


In 


to 


get out 


fact 


my dynamic personality is my 


biggest asset 


Touchy-Feely 
Web Applications 








The modern Web is a very responsive place where pages 
are expected to react to the user’s every whim, or at least that s 

the dream of many web users and developers. JavaScript plays a vital role in this 
dream through a programming technique known as Ajax that provides a mechanism for 
dramatically changing the “feel” of web pages. With Ajax, web pages act much more like 
full-blown applications since they are able to quickly load and save data dynamically 
while responding to the user in real time without any page refreshes or browser trickery. 


this is a new chapter 
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I want more...dynamic data 


Ycarwmg for dynamic data 

Remember Ruby, cube puzzle afficionado and blogger? Ruby loves her 
JavaScript-powered YouGube blog but she is frustrated with having to edit 
the HTML file for the entire page just to add new entries. She’d like to 
be able to somehow separate the blog entries from the HTML code that 
describes the blog page, freeing her up to focus on the blog content itself. 


Actcting new tlog 
entries to YouCuLe 
sltouldii’t require 
ectitingf tke wet page. 



ch^E 叫咖 a u _ Filing bactw— 

fiuby 


SSi rally 址 a 酿 1 呷頻 _ 卿柃呵 w 伽咖⑽ 

ty Ruby 

fi^rs» 咖挪加岬，心 WC，MUed feeling? 

rnkriPi. I Vjfw a Blog I Hi ry 


l» 


I.r L*h 

■ CfeOltj^pfl . FjVI 


0 ^ —— 

YouCubr - Thu ELop for Cubr I'uKilcrs 


YouCubc - Thi Bk* fer CuIk fujffert 




chrHWl0 ® lrol <,r£ hr (»[t «te7t Tint) 


i B h ‘ J skr r l 

|kv ujLw IwL uf 


c 。 riMChlG^ tDUl 

fv Hill# or«| 

|ian ^nL Itiu \ u Ut 

f^Lrcd tf 1 
cuts IW 

l-Mvy 


u n#I inarL 

i nsm 3 R IwrsJ ar§ sterainr^ |lu r d w 


( 訓 v 賊 ■从 


■ ■ ■_ 




niml 巧 " 耶-、 物 




fVu 如七 ed \)\o(^tr a^d 
tube dbrOCh R^y* 


Adding ^ hew blog Chtv-y vc^uivcs 

Ruby e di 七七 he ttT/WL -file -fo^ 

the \4 u Cubc web pay. 
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A data - driven YouCube 


Ruby’s -files -fov- da*ta- 
dr\\JCY\ pajes av-c available a*t 
http://v/y/y/. hcad-f iv-s*tlabs. 
^ dom/books/h-fjs/. 

Ruby is onto something. A version of her blog that separates blog content 
from web page structure involves dynamic data, data that is fed into a 
page dynamically as the page is processed by the browser. Web pages 
built out of dynamic data are known as data-driven pages because the 
page really just defines a structure that gets filled out by the data. In other 
words, the data is in charge of the page’s content. 


TV W03 data «s stored m 

a pWysi 乙 ally scf3v-3*tc -f »lc 

从 be edited Without 
>wcb 州 e. 



The web page ^oh-tams ttT/WL 

todt -Pov web page s-tv-u^-tuv-c plus 
Codt -PoV" 

blog daia ih-to -the pay. 


JavaStvifb is \rcspoy\siblc 
-fov fv-otcss'mj bloj 
data dy\d blc^d'mj »*t m*to 
a Ua\ HTML 阿 . 


丁 he blog Chivies av-c 
•fed -to the blog 

•(Vorw a scpav-a-tc -Pile. 



With the help of JavaScript, raw blog data is dynamically merged with 
HTML code to generate a final YouCube page that looks identical to the 
original. But this data-driven page is assembled from separate parts: the 
structural page and the blog data. With the blog data broken out into its 
own file, Ruby is free to manipulate the blog content separate from the 
HTML, CSS, and JavaScript code for the web page. 

Ruby only has "to 

edit this -file jjo 
update hcv- hew 
daia-dvivch blog. 


+ 





blog.xml 
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stitch in time saves nine 


O 


Dynamic data sounds 
pretty complicated. I bet it 
requires a bunch of messy 
JavaScript code, right? 



Dynamic data requires a little more coding effort up 
front but it pays huge returns on the back end. 

Although a page driven by dynamic data certainly requires some 
additional planning and effort up front, it more than pays for itself 
in the long run with quick and easy page updates. Besides, JavaScript 
has built-in support for dynamic data thanks to a nifty programming 
technique dubbed Ajax. 
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Ajax is all about communication 

Ajax makes dynamic data possible by allowing for tiny 
“conversations” between the client web browser and web 
server. More specifically, a script is able to ask the server for 
some data, like a collection of blog entries, and the server 
delivers it using Ajax. The script then takes the blog data 
and dynamically incorporates it into the page. 


Ajax allows a wet page 
to ctynamically receive 
data from a wet server. 






Server 


TiiC dliarrt initiates air> 
Aja% vc<\ucs*t, av>d 
v/a'i*b -fov a v-csfor^sc. 


Wpoh irc^civihg -the serve〆 
ircspohsc, i\)t dlicht takes 
the blog dd'td dhd ddds 
•• 七 "to tk page ihsiah-tly, 
wi-thou-t a page v-doad. 




What does “XML” mean in the context of blog data? 
How do you think it helps with dynamic data? 


JavaS^hp-t wves as the * 邐 

ihi-tia-tihg 

^c^ucs-t, hahdlmg the v-cspohsc, 

•…呼 ‘3 the daia iht> 
七 he web page. 


The dxtv^i ^ pay vc<\ucst 
七 he W03 da*ta ^\rom i\\t 

sevvev us'»y >5 一 


l/Vcb b\ro 


wsev-. 


丁 k sc\rvc\r rtU\\/CS 
■the vc^ucs-t, ahd 
v-espohds with -the 
blog dais. 


youcube.html 


Client 


TV^c scv-vcv- v*cs^>ov>ds by 

tV，e Wo, data 

\/o *tV\c 


blog.xml 
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an html by any other name 


Aw HTML for Gvcrythlwg: XML 

The “ML” in HTML stands for markup language, and it refers to the 
fact that HTML uses tags and attributes to create hypertext (the “HT”). 
Just as HTML is used to create hypertext web pages, XML is another 
markup language that is used to create, well, anything you want. That’s 
what the “X” means — anything! The idea is that there are all kinds of 
data that could benefit from being stored as tags and attributes. So why 
not extend the reach of markup languages to solve other data problems? 


XML is a marku] 

language used to 
iormat any kind 
oi data. 



What makes XML so powerful is its flexibility. Unlike HTML, 
which has a fixed set of tags and attributes, XML doesn’t 
define any tags and attributes — it just sets the rules for how tags 
and attributes are created and used. It’s up to each particular 
application of XML to spell out the specifics of the tags and 
attributes that represent the specific data. 
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XML lets you tag YOUR data YOUR way 


The real beauty of XML is that it can turn anyone into a custom 
tagmaker by using a little tag and attribute alchemy to cook up an entirely 
custom markup language for any purpose. There are certainly lots of 
existing XML languages that have already been created to solve lots of 
different problems, and it’s not a bad idea to use one of those if it happens 
to fit your needs. But creating a custom markup language of your very 
own is a tough temptation to resist. 


Similar -to ttT/WL code, 
this )(ML 6odc dohsis-ts 
3 of dcrwChts. 


<movie> 


<title>Gleaming the Cube</title> 


<director>Graeme Clifford</director 〉 


aspect o-f -tVic 
m ov'ie is s*bov-cd wrtWm 
i*ts ovm 七 3^ 


<summary>A skateboarder investigates the death of his adopted brother.</summary> 


</movie> 


Even though you’ve never seen this example XML markup language, 
which is entirely custom, the descriptive tags make it possible to decipher 
the data. Even more importantly, the tags are very specific to the data 
being stored — it just makes sense to use a tag named <director> when 
storing the director of a movie! 


The rnovic details 
doh-taihed withih 
"the <movie> -tag. 


if ~ 




Match the following tags with their descriptions, and then write down next to each description if 
the tag is an HTML or XML tag. 


<itunes : author> 
<span> 

<title> 


<strong> 

<input> 

<prompt> 


Bold text in a web page. 

The title of an online news feed. 

An input control in a web page. 

Text that is converted to speech for a telephone caller. 
The artist of an iTunes podcast. 

Inline content in a web page. 
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exercise solution 



Match the following tags with their descriptions, and then write down next to each description if 
the tag is an HTML or XML tag. 


ttT/HL 

y 生 . • 
mL 
mL 

>< 亂 



Bold text in a web page. 

The title of an online news feed. 

An input control in a web page. 

Text that is converted to speech for a telephone caller. 
The artist of an iTunes podcast. 

Inline content in a web page. 


XML is just text 


Similar to HTML, XML data is just text, which means it is stored in a 
normal plain text file. However, XML files are named with a .xml file 
extension, as opposed to the .html or .htm extensions used in HTML files. 



0 


0 


So the data-driven 
version of YouCube can 
be updated by editing 
an XML document... cool! 


L pearl.</body> 


<date>0 8/19 /20 0 8</date> 

<body>Solved the new cube t 


<date>08/16/2008</date> 


: course, now I'm bored c 


i to get a headache toiling over the 


new cube. Gotta r 


<date>08/21/2008</date> 


<date>08/29/2008</date> 


: sale online. Yikes! That c 


)<ML data »s 切\>响 
shored m -f iles W\i\\ a 
^'»lc 


shopping for a new on e .</body> 


: could be a t 




<body>Met i 
</entry> 

<entry> 

<date>08/27/2008</date> 

<body>Went ahead and ordered 
</entry> 

<entry> 

<date>09/3/2008</date> 

<body>Attended a rally 
</entry> 

<entry> 

<date>09/5/2008</date> 

</2^财 咖 7XW 娜. C 。" 13 卿 . . </bMs> 

<entry> 

<date>09/19/2008</date> 

the •»*» 1 - 

</entry> 

<entry> 

<date>09/24/2008</date> 



'i 


<blog> 

〈 title〉. .1 
<author>... 
<entries> 
<entry> 

</entry> 

</entries> 
|</blog> 


</entries> 

</blog> 


blog.xml 


544 Chapter 12 















dynamic data 


XML 令 HTML- XHTML 

They may have different file extensions but XML and HTML have a very 
important connection, and it’s called XHTML. XHTML is a modern 
version of HTML that follows the stricter rules of XML. For example, 
every starting tag in an XHTML web page must have a closing tag. 

HTML plays fast and loose with its syntax, meaning that you can get away 
without pairing up tags such as <p> and </p>. XHTML isn’t so forgiving, 
and requires such tags to always appear as matched pairs. 


XHTML is a version oi 
HTML tkat actkeres to 

tke more rigid syntax 

rules of XML. 


HTML 

This is a paragraph of text in HTML.<p> 

The <p> -(^0 is o-f-fcch used by 
itsdm ttT/VIL todt io demote 

ihe sia\ri o\r end o-P a 


XHTML 

<p>This is a paragraph of text in XHTML.</p> 


la^s £.oir\*bamm^ alv/3y s 

appeav" as mallied pairs m 



Another important difference between HTML and XHTML involves 
empty tags, such as <br>, which must be coded with a space and then a 
forward slash at the end to indicate that there is no closing tag. 


HTML 

This is just a sentence.<br> 

TKc bveak 

is toded •… ttT/V|L. 

3 -fovv^av-d slasii- 



XHTML 

This is just a sentence.<br / > 

A ahd -Poirwa^cl slash avc 

ih all empty ih 贿亂 


One more important distinction between HTML and XHTML is that 
XHTML requires all attribute values to be enclosed in quotes. 


HTML 

<a href=home.html>Go home</a> 

V. 丁 he atbribute value iWt 
m quotes, whidh violates 
\rulcs o( XWT/1/1L. 


XHTML 

<a href= M home.html">Go home</a> 



All )<ttTML attribute values must 
appav quotes. 


Although XHTML doesn’t directly factor into Ruby’s immediate needs in 
terms of modeling blog data in XML, it does illuminate some of the most 
important syntax rules of XML, which apply to all XML-based languages, 
including Ruby’s custom blog data language. 
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XHTML vs. XML 


Fireside Chats 

Tonight’s talk： HTML and XML drop the dime on web data 

The latest vc\rsioh o( ttT/WL 
has bcch \rc-Po\rrwulatcd usih^ 

)<ML, av\d is called /HTML. 

_ ) XML: 

You know, you’ve really made things confusing for 
me. Here I am the backbone of the Web, and now 
many people are confused about me thanks to you. 



It’s not my fault that you have tunnel vision, always 
thinking about web pages. I broadened my mind, 
and in doing so I can represent any kind of data. 


But you’re still no good without me because 
browsers only display HTML code. They don’t even 
know what to make of you. 


Hey, I’m a mysterious fella. The truth is I’m a man 
without a face — all substance and no appearance. I 
need you when it comes time to reveal myself. 


How is that possible? Who cares about data with no 
appearance? 


Wow, you really don’t get out much, do you? The 
rest of the world operates on data that can’t be seen 
the majority of the time. Bank transactions, political 
polls, weather conditions, you name it. 

All that stuff can be seen thanks to me — it’s all right 
there on the Web. 


That’s true, but how do you think it gets stored 
before it makes it to a web browser? Not as 
paragraphs and tables, I can tell you that. It often 
gets stored using me because I provide lots of 
structure and context — I make data easy to process. 

I see. So are you suggesting that we actually work 
together? 

Absolutely! I have no concept of what data looks 
like. Instead, I focus on what it means. As long as 
people keep using web browsers, I’ll continue to 
need your help displaying the data I represent. 

That’s a huge relief! 
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XML and the YouCube blog data 

XHTML is a great application of XML that is rapidly improving the 
structure and reliability of web pages. With respect to the YouCube blog, 
however, Ruby needs a custom XML language that models her specific blog 
data. This requires assessing the different data required of the blog, and 
considering how it might fit into the context of hierarchical XML tags. 



<author> 



Blog.prototype.signature = "by Puzzler Ruby’ 


new Blog("Got the new cube 工 ordered. It's a real pearl 


new Date("08/14/2008")); 


i^harpen your pencil 


Invent your own XML language for storing a blog, and use the language 
to code a blog entry. Items such as title, date, author, and the entry itself 
should be considered. 


<blog> 


</blog> 
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Solution 


Invent your own XML language for storing a blog, and use the 
language to code a blog entry. Items such as title, date, author, and 
the entry itself should be considered. 


: blog> 


The blog 

,s <*ti*tlc>youCubc - The Bloj -fov- Cube Puzjdc\rs</ 七 •• 七 le> 

:“ Ruby</auW. 



<cirrbrics> 

^ n . what tag holds 

CoWtchoy. ^ <^iry> ..ikc.bWauthor. .…. 

blo<\ caries J 

is s-toved ^ 

i\\t <cir>Vics> 


<body>^o*t 七 he new dube I ordered- l*t’s a \rcal pca\rl </body> 
t , ~ - ^°9 ⑶ tiry is \rcp\rcschtcd by 

... "… .tKc. <ct\br>f>. .iag. 

</c^*t\rics> TV^c d3*tc a^d body o-f 

. tacM tioj c^vr'y Wave .七赃 

</blog> oym ycsfcttivc -tajs. 



tliereicire no o 

Dumb Questions 


Why not just store blog data as regular unformatted text? 

You could but then it would put a huge burden on the script 
code to sift through the data and try to break it apart into separate 
blog entries with their own dates and bodies. XML adds a predictable 
structure to data so that you can easily distinguish between separate 
fields of data, such as unique blog entries with their own dates and 
bodies, not to mention the title and author of the blog itself. 

Is the 〈 entries 〉 tag really necessary in the XML 
blog data? 

It isn’t strictly necessary but it does make the data format 
more structured and easier to understand. For example, without the 
〈 entries 〉 tag in the previous blog data, it would be impossible 
to tell that the blog format is capable of supporting multiple 
<entry> tags but only one <title> and <author> tag. 
The 〈 entries 〉 tag implies that there is a collection of multiple 
blog entries, which gives the data more structure and makes it more 
obvious how the data should be used. 


What is the connection between XML and Ajax? 

Ajax was once taken to be an acronym for Asynchronous 
JavaScript And XML, so XML was at one point directly tied to Ajax. 
That acronym is now considered passe, as the role of Ajax has 
widened to not always require XML as part of the equation. But the 
reality is that XML still forms the basis of most Ajax applications 
because it provides such a great mechanism for modeling data. 

As we find out later in the chapter, there is a connection between 
Ajax and XML in the way that JavaScript supports Ajax. JavaScript 
doesn't lock you into using XML as a data format for carrying out Ajax 
requests and responses, but it does make them much easier when 
handling all but the most trivial of data. So although Ajax purists may 
claim that XML and Ajax have no real connection to one another, in 
practical terms they usually go hand in hand. The old acronym still 
rings true most of the time even if it has fallen out of favor. Well 
explore the “asynchronous” part of the acronym a bit later. 
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dynamic data 


I still don’t get it. How does storing data 
in a special format make it dynamic? 


XML alone isn’t dynamic but it happens to mesh 
quite well with both Ajax and the DOM. 

XML is the data format most commonly used with Ajax, and 
therefore is the logical candidate for representing blog data that will 
be sent back and forth from server to client in the data-driven version 
of YouGube. It’s the highly structured nature of XML that makes it 
so ideal for shuttling data. 

And XML’s similarity to HTML (XHTML) makes it possible to 
use the DOM to access XML data as a tree of nodes. This means 
you can write JavaScript code that traverses a tree of XML nodes, 
carefully isolating desired data, and then incorporating it into a web 
page dynamically. It’s all these things and more that make XML a 
great data storage solution for building dynamic, data-driven pages. 
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adding ajax 


Injecting YouCube with Ajax 


With a shiny new XML blog document in hand, Ruby is ready to 
dynamically load it into the YouCube page with the help of Ajax. 



The Request 


How exactly does 
Ajax allow XML data to 
be dynamically loaded 
into a web page? 


❺ 

The server receives 
the request and 
gets to work 
creating a response. 



Ajax revolves around the concept of requests 
and responses as the means of carrying out 
the communication of data between the client 
browser and the server. 


The \rc«jucst is the 
o+ the )<A1L 
•Pile dohtaihihg -fchc 
blog daia. 





• pin 


blog.xml 


The 


browser sends 


the 


request 


to 


the 


and 


waits 


server 


for 


a 


response 


_ <html> 
<head> 

丨 </head> 

I <body> 

I </body> 

I- 


P\rio\r "to schdiha the A\ax v-cqucst 


the web page doesh't have -the 


blo^ 3hd ish ’ 七 


able "to show "the blo^ Ch*t\rics 
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❺ 

The server creates a 


response for the browser 




Server 


A SCVVCV-sidc (y,oi 

is sometimes 
^^ui^red -to pirodcss Ajax 
^c<\ucsts ahd pv-cp the 
v-espohsc dais. 


by packaging up the data 
in the blog file. 


Tlie Chti\rc ^ohichts c^p -the 
)<亂 blog ^ a 代 v-ctuv-hcd 
•… the Ajax \rcspohSC- 


The Response 


o 

The browser 
unpackages the XML 
data in the response 
and carefully 
incorporates it into 
the web page. 


i^c XML daia is 
i^tcgira-tcd m-to -the WT/V[L 
todt Jc the web page, it 
be scCh ih "the b\roy/scV". 




What kind of JavaScript code do you think is responsible 
for working with Ajax requests and responses? 


blog.xml 


^ vuC iih - Ibc C'vh Fkuim 




'■fE-nUB 






CE^> >!x or, ^ Irt, 网知 ■ . tar 


• ysimm 

.wuutadfe«KH. 


考 • u . 


’pwiaww—lim 油 》youcuBefntml 


i-Ur. 


■# 麵 u r«s™ ” 


in 


TV^c JavaS 叫七 ^odc vcsfo^siblc 
-fov" ^v-c 3 *b »^5 v-c^ucs-t 

and response is \rui^ 

>wrbiVm *bV^C >/cb 
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the JavaScript part of the equation 


JavaScript to the Ajax rescue: XMLHttpRcquGst 

JavaScript includes a built-in object called XMLHttpRequest that is used to initiate 
Ajax requests and handle Ajax responses. This object is fairly complex, containing 
several different methods and properties that work together to support Ajax. 



readyState 

The numeric state of the request: 
0 (uninitialized), 1 (open), 2 (sent), 
3 (receiving), or 4 (loaded). 

status 

The HTTP status code of the 
request, such as 404 (not found) 
or 200 (OK). 

T\)tst two pvopc\rt»cs 
*bo^c*t^cv be used *to 

i-f Aja% 

lids -f 'misiicd 

W\i\\ a valid response. 


onreadystatechange 

A reference to the function 
that is called when the state 
of the request changes. 


TV^cvc av-c a -few oi\\tr methods a^d 
pv"opcv"*bics m XMLHttpRequest 
o\)^ci but -bV^csc av-c *biic ^osi 

OY\tS. 


XMLHttpRequest 



abort() 

Cancel the request. 

method is ohly used 
•t "the Ajdx vc^ucs-fc 
heeds io be caused. 

open() 

Prepare a request by 
specifying its type and URL, 
among other things. 



send() 

Send the request to the 
server for processing. 



This p\ropc\rty is u^i^uc *m that it 
holds a v-c-fcv-c^tc -to the dus-torw 
ii^hdlcv* ■that is Cs\\td the s-ta-tc 
o( the Ajax \rc<\ucs-t - -this 

ha^dlcv* -fu^d-tioh is whcv*c the 
\rcspohSC is p\rotcsscd- 


responseText 

The response data returned 
from the server, as a string 
of plain text. 

responseXML 

The response data 
returned from the server, 
as an object consisting of 
a tree of XML nodes. 



"two r^ctliods 
woirk -togethev- -to 
3 亡七 Aj^X \rc^ucst 

ready dhd se^d 
it -to the sc\rvc\r. 


TVicsc bm f\rofcv-t»cs s*tovc 

i\\t daid rth^Y\td by 

sc\rvc\r *m i\\t Aja% 代 sfemse. 
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XMLHttpRGquest is pretty complex 


The XMLHttpRequest is incredibly powerful and also surprisingly flexible. 
But with that power and flexibility comes complexity, meaning that even the 
most basic of Ajax requests requires a fair amount of JavaScript code. This 
is thanks in part to browser inconsistencies, but it also doesn’t help that the 
different options available for fine-tuning the object’s behavior can be confusing 
when all you really need to do is quickly move some data dynamically. 


Tke XMLHttpRecjuest 

object is powerful tut 
also somewltat ol a 


As an example, consider that the following code is necessary just to create an 
XMLHttpRequest object that will work across a variety of browsers: 


pain to use. 


var request = null; 
if (window.XMLHttpRequest) { 
try { 

request = new XMLHttpRequest() 
} catch (e) { 

request = null; 


// Now try the ActiveX (IE) version 
} else if (window.ActiveXObject) { 

try { 

request = new ActiveXObj ect("Msxml2.XMLHTTP"); 

// Try the older ActiveX object for older versions of 
} catch (e) { 


The 匕 ode has "fco tv-y a -few 
di-ffc\TCht -to 

the XMLHttpRequest 

ov\tCr, bemuse some b\rowscv*s 
( l 幻 suppo\rt it di-P-Pcvch-tly. 

\ 


Bits 



try { 

request 
} catch(e) 
request 


new ActiveXObj ect("Microsoft.XMLHTTP"); 


null 



^cU\y deal with 心 pt ^ 


After the XMLHttpRequest object is created, it’s time to set the request 
handler function and then open the request. 


11 

成 The problem 

with creating 
an XMLHttpRequest 

object is that browsers 
must provide their own 
implementations of the 
object. The good news 
is that the methods and 
properties are consistent 
across all browsers — it’s 
the object creation that 
has to factor in browser 
differences. 



request.onreadystatechange = handler; 
request.open(type, url, true); // always asynchronous (true) 


TKis is dus*fcom -fuy>d*tio^ is td\\tA 
h ⑶ scv-vcv- v-cspoy>ds *to i\\t ve'uest 


\ v-cady io be sch-t, ahd also 

dctc\rmihcs wha-t kihd o( it is (6fBT or POST). 


When opening a request, you must specify the type ("GET" or "POST"), 
as well as the server URL and whether or not the request is asynchronous. 
An asynchronous request takes place in the background without 
making a script wait, so pretty much all Ajax requests are asynchronous. 
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i get it 


Of gets awd posts 

The type of an Ajax request is very important, and reflects not only what 
is being sent to the server, but also the intent of the request. One type of 
request, also known as a request method, is GET, which is used primarily 
to retrieve data from the server without affecting anything on the server. 
The other type of request, POST, typically involves sending data to the 
server, after which the state of the server usually changes somehow in 
response to the data that was sent. 

get 


Tke two types oi 
requests used witk Ajax 

are GET and POST, tlie 

same ones used wken 

sutmittingf HTML i orms. 


Used for data retrieval that doesnt 
change anything on the server, ma 
amounts of data can still be sent to t e 
server in the URL if necessary GET 

perfect for retrieving the blog data from 

an XML file on the server. 




… lu me server that 
ofThe ° W CaUSCS a Chan g e in the state 

y to the blog using a web form. 


o( 

•file doh-taihihj 

Chti\rc blog. 
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fret or Post? A request with XMLHttpRequest 


After deciding on a request type and specifying it when opening the request, it’s 
finally time to send the request to the server for processing. The specific code to 
submit a request varies according to whether the request is a GET or a POST. 

Tk 6itT \rc^ucsl ahd URL 

spc^i-Picd whch the is opChcd- 

request.open("GET ", n blog.xml n , true); // always asynchronous (true) 



request.send(null) 


TiiC vc<\ucs*t is serrt v/rtii 
y\o da*ta, v/KitK is 

av^urwC^*t *to scv\dO is vuaII. 


XML blog data is 
requested from the 
blog.xml file on the 
server via a GET 
request. 

GET Request 




TKc mvolvcs data sent *to 

s^vc^, so data tvpc „usi be set- 


request.open("POST 


a POST request. 

T\\t POST vc<\ucs*t air>d sewev URL, 
-tKis ddse d sevvev- stvipt av-c spcdi-f icd 
*tKc v-c<\ucs*t is opened- 

addblogentry.php ", true); // always asynchronous (true) 


request.setRequestHeader("Content-Type 


application/x-www-form-urlencoded; charset=UTF-8") 


request.send("09/26/2008&These dreams just.•.Scubeapart.png"); 




Don’t stress out over all this GET and POST stuff. 


丁 he \rc^ucs-t is scht with the 
data passed a\o^ ih -the 
airgurhCh-t -to -the schdO method. 


If you don’t have any experience with GET and POST from 
HTML, don’t worry about it. They will make more sense 
as their roles in YouGube continue to get more solidified. 
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growing pains: simplifying ajax 


Make XMLHttpRequest less painful 


Although the XMLHttpRequest object is incredibly powerful, it comes 
with a fairly steep learning curve, as you no doubt already realize. Not 
only that, but it requires a certain amount of “boilerplate” code that 
has to go into every Ajax application that uses it. For this reason, lots 
of third party libraries have been created to make it easier to use the 
XMLHttpRequest object. Many of these libraries extend the features of 
JavaScript, which is great but requires even more learning. 

For this reason, a helpful strategy for YouGube is to create a minimal 
custom object that serves as a convenient assistant to XMLHttpRequest, 
allowing us to focus purely on doing things with Ajax, as opposed to 
wrestling with the XMLHttpRequest object or mastering some third 
party library. This custom object, Aj axRequest, takes a minimalist 
approach to making the XMLHttpRequest object more usable. 

XMLHttpRequest 




I readystate 

■ I abort () 



■ status 墨 

■ if" 10 

onreadyst^techange 

1 open() 

■ 


«sr>onseText 

1 send () 1 


u 

I responseXML 

1 , 


Tke custom 
AjaxRecjuest 
object eases tke 
pain oi making 
Ajax requests. 


Most methods 

•m simply 

attess o-V {he 

object 


The underlying XMLHttpRequest 
object is stored in the request 
property of the custom 
AjaxRequest object. 


In addition to the send () method, which we delve into in a moment, the 
constructor for Aj axRequest is where Ajax is dramatically simplified 
as compared to using the XMLHttpRequest object alone. This is all it 
takes to create an Aj axRequest object that is capable of initiating Ajax 
requests in any modern browser: 

Tiic dons*tvud*fcov -rov- 
A\a%Rc<\ucst auWatidally 

」 ^ g all mtvidatics 

o!< dveatm^ U^dc\rly'm5 

七 objedt 



Tlie schdO method is -the v-eal 
wo\rkho\rsc o-P Aj3xRc<\ucsi 
七 akihg o( the details o( 
opch'mg av\d schdihg a v-c<\ucst. 
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JavaScript Magnets 


The custom Aj axRequest object wraps up the standard XMLHttpRequest object, 
providing a much simpler interface for sending Ajax requests and handling their responses. 
Problem is, the send () method of the Aj axRequest object is missing a few key pieces of 
code. Use the magnets to finish the code for the method. 
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JavaScript Magnets Solution 


The custom Aj axRequest object wraps up the standard XMLHttpRequest object, 
providing a much simpler interface for sending Ajax requests and handling their responses. 
Problem is, the send () method of the Aj axRequest object is missing a few key pieces of 
code. Use the magnets to finish the code for the method. 


Da-ta is only 
serrt 七 0 the 
scv-vc\r whch 

■the 

is a POST 


丁 he schdO method se^ds 3v) 

Ajax vc^ucs-t with derails 

^ lirl handler, postDataType, PostData) { 

AjaxRequest.prototype.send = function(type, url, handle , P 

if (this.request != null) { 

// Kill the previous request 

this•request.abort (); 


// Tack on a dummy parameter to override browser caching 
]_ += M ?dummy =M + new Date () . getTime () ；■ 


try 


this • request. onready^^^^ch^nge 




Ihandler 


this • request. open.(. 


Tiic dus*tom iiav>dlcv- 

-fur>d*tio^ Will 己 ailed 

bo iid^dle *tKc scwc/s 
vcsfov>sc *to v-c^ucst 


true); // always asynchronous (true) 


if (type. 

// send a GET request; no data involved 


this•request.send( 


else 


The "type b> sc^dO 

dctcvrwmcs v/hc-thcv- -the 

v*c«\ucsi is a 6jBT oy a POST. 


// send a POST request; the last argument is data 


this•request.setRequestHeader("Content-Type ", 


this.request.send( 


alert("Ajax error communicating with the server.\n' 


'Details : " + e); 


This CoAt is s-fco\rcd ih the aja>cjs 
cx-tcv-^al -file alcmg with the 

^s'brud^v* av\d o-thev- Aja^Rc«\ucs-t 
methods. 


■ vary; 


Lfunction doX() 


function doY() 


ajax.js 
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Making sense of m Ajax request 

The custom Aj axRequest object consists of a constructor and several 
methods, one of which is particularly useful. The send () method is used 
to prepare and issue an Ajax request to a server in a single call. All Ajax 
requests issued using send () are either GET or POST requests, which 
correspond to HTML form submission requests. The difference is that an 
Ajax request doesn’t require a complete reload of a page. 


AjaxRequest 


send(type, url, handler, postDataType, postData) 


type 

The type of the request, GET or POST. 

url 

The URL of the server (blog.xml in 
the case of YouGube). Data can be 
packaged into this URL if necessary. 

postDataType 

The type of data being sent (only for 
POSTs, not required for GETs). 



handler 

The callback function used 
to handle the response. 


postData 

The data to be sent (only for POSTs, not 
required for GETs). POST data can be 
submitted in several different formats. 


All Ajax requests involve these same pieces of information, although GET 
requests skip the last two arguments, which are optional. So the first three 
arguments to send () are the most important, and are sufficient for most 
simple Ajax requests. As an example, the following call to send () uses 
the first three arguments to request (GET) XML data from a file named 
movies.xml on the server: 


T\\t type 一 

request 


飞 


ajaxReq.send("GET' 


The URL o( -the 

guested daia -file. 


'movies.xml ", handleRequest); 




This Code assumes 

we’ve already 

^ object 

s-tov-cd it \v\ the 
ajaxRe 气 variable. 



TiiC d.us*tom -fur\d*tior\ 七 ha 七 
y/ill be tailed *to Ka^dlc *bKc 


o 



Don’t panic 
over the 
handling of 
requests. 

We’ll get to the ins and outs of 
how Ajax requests are handled 
in custom JavaScript code 
soon enough. For now, just 
understand that a custom 
request handler function 
must be set for a request, and 
that the function is called when 
a request is completed. 
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may I make a request? 

request 

The tefeewten the server's court 


When the send () method is called on an Aj axRequest object, an 
Ajax request is sent to the server, and the web page is left to go about 
its business while the server processes the request. This is where the 
asynchronous part of Ajax really shines. If the request was synchronous, 
the page would be frozen, unable to do anything until the server returns 
with a response. But since the request takes place asynchronously, the 
page isn’t halted and the user experience isn’t stalled. 




While the server 
processes the request, 
the page is allowed to go 
about its own business 
without being stalled. 


Server 



An asynclironous Ajax 


Just because the page isn’t frozen while a request is being processed 
doesn’t necessarily mean the user can actually do anything productive. 
It all depends on the specific page. In the case of You Cube, 
successfully viewing the blog is entirely dependent on getting the blog 
data back from the server in an Ajax response. So in this case the user 
experience is tied to the Ajax response. 


request takes place 
witkout freezing a page 
wkile it waits lor tke 
request to te processed 
a server. 


BULLET POINTS - 

■ The XMLHttpRequest object is the standard 
object for carrying out Ajax requests but it can be 
somewhat messy to use. 

■ The custom a j axRequest object serves as a 
convenient way to use Ajax without having to deal 


directly with XMLHttpRequest. 

Ajax requests always fall into one of two types, get or 
post, which is determined by the data being sent to 
the server, as well as how the data affects the server. 

The send () method Of the A j axRequest object 
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Dumb Questi9ns 


Is the Aj axRequest object 
necessary for carrying out Ajax requests? 

No. It’s perfectly fine to use the 
XMLHttpRequest object directly 
to issue Ajax requests and handle their 
responses. But why would you when 
there is a much easier way thanks to 
the Aj axRequest object? The 
Aj axRequest object doesn’t do 
anything earth-shattering—it's just a 
convenience object that helps simplify the 
task of using Ajax by taking care of the “busy 
work” involved in assembling Ajax requests. 

How is an Ajax request/response 
any different than an HTTP request/ 
response? 

HTTP requests and responses are 
used by web browsers to retrieve HTML web 
pages from web servers. Ajax requests and 
responses are very similar to HTTP requests 
and responses except for a couple of key 
differences: the Ajax versions can 


occur at any time and don’t necessarily 
involve the delivery of HTML data. In fact, 
one of the huge benefits of Ajax is that it can 
be used to request any kind of data. 

It’s a big deal that Ajax can handle any kind 
of data, but it’s also the size of the data 
that matters as much as anything. Ajax 
isn’t limited to handling an entire page or 
document of data at a time. In fact, it’s 
really geared toward the delivery of little 
bite-sized pieces of data. In doing so, Ajax 
allows a page to dynamically modify itself 
by requesting little chunks of data and then 
incorporating it into the page. And all of this 
happens without the page ever having to be 
reloaded. 

So Ajax makes it possible to 
dynamically assemble a web page in 
pieces? 

Yes! That’s the main idea behind Ajax. 
But it’s more than just assembling a page 
from pieces. It's also about the timing of 
when this assembly occurs. Ajax requests 


and responses take place in real time, often 
without interrupting the usability of a page. In 
other words, users aren’t stuck waiting for an 
entire page to reload when all that needs to 
be updated is one small section of the page. 
That section of the page can be loading in 
the “background” while someone continues 
to read and interact with other parts of the 
page. 

What do GET and POST have to 
do with all this? 

GET and POST determine the 
specifics of how an Ajax request is handled 
by the server. However, they aren’t 
any different in terms of being able to 
dynamically request data of any type at any 
time—all of the Ajax benefits apply to both 
request types. The main distinction between 
GET and POST has to do with whether 
or not the server undergoes a change in 
state based upon the data, such as storing 
it in a database. If so, a POST is in order. 
Otherwise, go with GET. 




4 " 




Match each Ajax-related piece of code to what it does. 


XMLHttpRequest 


Retrieves data without changing 
anything on the server. 


GET 


send() 


AjaxRequest 


Submits an Ajax request to the server, 
resulting in a response. 

Sends data to the server, somehow 
resulting in a change on the server. 

The standard JavaScript object that 
makes Ajax possible. 


POST 


The custom object used to simplify 
Ajax requests and responses. 
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-+ 費，备*蕈， 

• + 

Match each Ajax-related piece of code to what it does. 




Retrieves data without changing 
anything on the server. 

Submits an Ajax request to the server, 
resulting in a response. 

Sends data to the server, somehow 
resulting in a change on the server. 

The standard JavaScript object that 
makes Ajax possible. 

The custom object used to simplify 
Ajax requests and responses. 


AjaxRequest 
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Interactive pages start with a request object 

Regardless of how Ajax is being used or what kind of data it is attempting to 
access, any Ajax communication of data begins with a request. So Ruby’s first task 
in turning YouGube into a data-driven application is to issue an Ajax request for 
the XML file containing the blog data. 



It sounds as if I need to create an 
AjaxRequest object and then use it to 
send a request for the blog data. 


Create an Aj axRequest object. 

o Issue a GET request to retrieve 
the blog.xml file from the server. 

o Handle the request... ? 

/ Ruby still isn ’ 七 su\rc about 

step 乙 3 灼 -podus 

七 he -fivs-t *Uo s*tcfs (or now. 



rpen your pencil 


Write code to create an Aj axRequest object, and then use it 
to submit a request for XML blog data. 
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sharpen solution 


(^Sharpen your pencil 

Solution 


Write code to create an Aj axRequest object, and then use it 
to submit a request for XML blog data. 


o yav- Y\t^i Ajf); 

TV v-c<\ucs*t is a O 
6\BT v-c<\ucs*t sm“ all 一 
>mcVc domj is \rcVicvm 5 

dd*td -fv-om *tv^c SCV"VCV". 


The )(ML -Pile is spc^i-Picd 

as 七 1^ URL <^P -the vc^ucs-t. 



UoY\t Jc *tWis mcar\S n\\ACM urrbl 

y/e V^a^dlc \rcspo^sc m tV^c 
Custom V^dleRe'uestO *(W*bcm. 


Call me when youVe done 

Once an Ajax request is sent, the browser’s role changes — it’s not waiting 
for a response from the server. But because Ajax requests are typically 
carried out asynchronously, the user can continue interacting with the 
page while the browser waits for the response behind the scenes. In other 
words, the Ajax request doesn’t halt the page while the request is being 
processed on the server. Once the request is finished being processed 
on the server, its response is handled in JavaScript code using a callback 
function, the request handler. 


Tke client script 
kanclles tke response 
to an Ajax request 
using a custom 
callback function. 



it the blog-wide sigr 
.prototype.signature 




L^icciLt: 




1 /2k Li 1 1 I 1 -y^/~v /~h 1 -■ /"v -f- -i~ m 

n I 1 I I I I ■ 1 1 1N I 1 n^ri r I 1 I I li if 


■^- 1 ^ V T~v 1 


x~~~v / 1 1 /2k y~v -ry-x 


TV^C vcspoK\sc IS sent -fv-om i\\c 
scv"vcv" "to tiic bvo^sev*> 

vclics ov\ a c.us*tom d.3llkadk 
-function "to Ii3ir\dlc tV'C vc^ucst- 


Server 


\Afeb Idvo^scv*- 


The hahdlcRc^ucstO 

-Puhdtioh is 
Ch*ti\rcly duS"tonr\ ; ^hd must 
be supplied by the s^v-ip-t. 


^3 
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Handling a respoHse...seamlessly 


The custom request handler callback function, handleRequest () in 
this case, is called once an Ajax request finishes. In addition to signaling 
that a request has completed successfully, this function’s job is to take 
action based upon the response data returned by the server. 


I get that the request handler is called 
to take care of the Ajax response, but how 
does it access the response data? 


Methods of the AjaxRequest object have access 
to the Ajax response data. 

The request handler function provides access to the data passed back 
in an Ajax response through two methods of the Aj axRequest 
object, getResponseText () and getResponseXML (). 

AjaxRequest 




getResponseText() 

Get the data in an Ajax 
response as raw text. 


Only one of these methods has access to viable data for any given 
response, meaning that the format of the data determines which 
method should be used. So getResponseXML () should be used 
if the response data is XML, in which case getResponseText () 
won’t return meaningful data. The same is true in the reverse if the 
data is raw text, as opposed to structured XML code. 




getResponseXML () 

Get the data in an Ajax response 
as structured XML code. 



Knowing that XML code is structured a lot like HTML code, how 
could you access the XML blog data in the request handler? 
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DOM saves the day 


If XML is just a bunch of tags, 
then can the DOM be used to 
process the XML response data? 


The POM to the rescue 


Ruby’s puzzling skills are certainly paying off because she’s dead-on with 
her idea of using the DOM to process XML response data. The DOM 
is all about manipulating HTML data as a tree of nodes. But there is 
nothing HTML-specific about the DOM, which means that it can also be 
used to work with XML as a tree of nodes. Ruby just has to think about 
her You Cube XML blog data in terms of nodes. 


<b itEle>YouCube - The Blog for Cube Pu ZZ lers</title> 

<author>Puzzler Ruby</author> 

<entries> 

<entry> 

<date>08/14/2008</date> T , , rea i pearl.</body> 

<body>Got the new cube I ordered. It s a real pear 
</entry> 

<entry> 

<date> 09 / 26 / 2008 </date> . irder . now I'm seeing 

apart-"ha? <strong>does</stron g > it 

mean?</body> 

<image>cubeapart.png</image> 

</entry> 

</blog> 


author 


The <au"tho\r> -tag 

the author hdme 
3s a Child text dcrwCht. 




T\\t <body> *ba^ is capable 

o-f several Aildv 

i-f blo^ CoY\itv\i Cov\ia\Y\s 

HTML -fo\rma*ttrn5 


Ruby needs to be able to extract the content from nodes of XML data, 
which is a repetitive DOM task that is better suited to a function. There’s 
no sense in adding a bunch of duplicate code to YouGube if it can be 
avoided. 
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The gefTexfO Up Cl^se 


The custom getText () function handles the drudgery of drilling into 
an element (node) in the DOM tree and pulling out all of its content. 


function getText(elem) 


var text 


if (elem) 


if (elem.childNodes) 


The dcrwCht 

the dcrwCht whose 
is -to be 


Loop 3 ll 

elements cM\\A Y\odts. 


for (var i 


0 ; 


< elem.childNodes.length; i++) 


var child = elem.childNodes[i]; 
if (child.nodeValue) 


text += child.nodeValue 


else 



if (child.childNodes) 

if (child.childNodes[0].nodeValue) 


Add the child’s doh-tcht 

o»vto the "text viable. 


text 


child.childNodes[0].nodeValue 


V 




Rctu\r^ -the variable ； 
whith do^taihS all o( the 
clcmc^s 匕 hi Id 匕 onterrt. 


|-P av-c cM\\d y\odcs 

y/rtWm d tWild 矜 ode ， j uS 七 

yak *tVic CoY\ic}/\i < 

*(*iV"S*t Oir\C w\OVC oy \ 




return text; 



rpen your pencil 


Given that the XML response data has already been stored in a 
variable named xmlData, write code to set the signature of the 
YouCube blog to the name stored in the 〈 author 〉 XML tag. 
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^Jharpen your pencil 

Sobtion 


Given that the XML response data has already been stored in a 
variable named xmlData, write code to set the signature of the 
YouCube blog to the name stored in the 〈 author 〉 XML tag. 


Bloj.j>\ro-bo*typc si^a*tu\rc — u by u + 


TTie sighoi-tuirc is a ^lass pv-opcv-ty, 
so it rwus-t be sei thv-ough the 
P^ro-totypc object o( Blog. 


Use i\\t tusW y*tU() 

-to t^braci it%i 
dor\*tcv\*t -fv-om <3u*t^ov> *1^. 



Thc\rc should ohly be 
<autho\r> tag ih -the X/WL data, 
so j us "t gv-ab the -Pivst OhC. 



Haiftdiiiiftg Ajax Responses 

This week’s interview: 

The handleRequest() Ajax request handler fesses up 


Head First ： We hear that you’re pretty good at 
responding to Ajax requests. What does that involve? 

handleRequest ()： When an Ajax request goes down, 

I get tapped to handle the response, which often contains 
data sent from the server. My job is to first make sure the 
request was carried out OK on the server, and if that 
checks out, then I get to dig through the data and take 
care of integrating it into the web page if necessary. 

Head First ： So you actually get called when a request 
finishes? 

handleRequest ()： Oh yeah. In fact, I get called several 
times throughout the request process, but most of the time 
people are only interested in me doing something at the 
very end. 

Head First ： I see. And how do you know when that is? 

handleRequest ()： Well, the AjaxRequest object has a 
couple of methods I can call to check the state and status 
of the request to make sure it has finished without any 
problems. 

Head First ： Once that happens, how do you know what 
to do? 


handleRequest(): Well, it’s really not up to me. 
Remember, I’m a custom function, so I’m different in 
every application. 

Head First: Why is that? 

handleRequest ()： Because different applications use 
response data in different ways — it’s entirely application- 
specific. And so am I. 

Head First: Wait a minute, you mean someone has to 
write you over again for every application? 

handleRequest ()： That ? s right. It only makes sense 
because a shopping cart application would process its 
Ajax responses very differently than a blog, for example. 
Ajax makes sure I get called once the server finishes with 
the request, and from then on everything is completely 
custom. 

Head First ： So part of building an Ajax-powered web 
page is creating a custom request handler? 

handleRequest ()： Absolutely. That’s where most of the 
real work in an Ajax application takes place. 

Head First ： That’s very enlightening. I appreciate it. 

handleRequest ()： I’m always happy to respond. 
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BE . 

Your job is to play JavaScript annotator and add 
lots cf annotations to explain exactly Gratis 
going on in tire handleRequest() function. 7 is a 

ma^ic number - are there 7 tilings 
tiiat lead to a successful request? 



function handleRequest() { 

if (aj axReq.getReadyState() == 4 && ajaxReq.getStatus() == 200) { 

// Store the XML response data 

var xmlData = ajaxReq•getResponseXML()•getElementsByTagName(''blog") [0]; 

// Set the blog-wide signature 

Blog . prototype . signature = ''by '' + getText (xmlData . getElementsByTagName (''author^) [ 0 ]); 


// Create the array of Blog entry objects 

var entries = xmlData • getElementsByTagName (''entry ”）； 

for (var i = 0; i < entries.length; i++) { 

// Create the blog entry 

blog.push(new Blog(getText(entries[i] .getElementsByTagName(''body") [0]), 
new Date(getText (entries[i] .getElementsByTagName(''date” ） [0])), 
getText (entries [i] . getElementsByTagName (''image ”） [0]))); 


// Show the blog 
showBlog(5); 


you are here ► 


569 



be the solution 


BE . 如 如 f 雜 §©Iug©n 

Your job is to play JavaScript annotator and add 
lots cf annotations to explain exactly Gratis 
going on in tire handleRequest() function. 7 is a 

ma^ic number - are there 7 tilings 
tiiat lead to a successful request? 



Sc*t blo^ si^atuvc 
•fco m 

<au*t^ov> *ta^- 

function handleRequest() { 


/Wake su\rc the \rc^ucs-t 
has Completed su^css-fully by 
its siaic ay\d s-b-tus. 



/ 


TiicV"C is or\ly ov\t <blo^> 
•ta^ m i\\t )<ML data, so 
yra\) the -f iv-s-t item m 
i\\t av-vay \re*bu\nr^d by 
yb&cw'cn'bBylajNaw'C^* 


200 ) 


if (aj axReq.getReadyState() == 4 && ajaxReq.getStatus()= 

// Store the XML response data 
var xmlData = aj axReq.getResponseXML() .getElementsByTagName(''blog^) [0]; 



// Set the blog-wide signature 
Blog . prototype . signature = ''by 


// Create the array of Blog entry objects — 
var entries = xmlData • getElementsByTagName (''entry ”） 
for (var i = 0; i < entries.length; i++) { 

// Create the blog entry 


getText (xmlData . getElementsByTagName (''author^) [0]); 

户 hc c 士 y whidh 

^ old y h f blo 9 ⑶ w ft iWt hc^ssavv 

^ 9«t the e 士 whch we 
9° io ch^y. 


blog.push (new Blog (getText (entries [i] . getElementsByTagName (''body") [0]), 
new Date(getText(entries[i] .getElementsByTagName( 、 'date 〃） [0])), 


// Show the blog 
showBlog(5); 

\ 

Call i\\t sViov/BlojO 心1^七咖 
•to display *tV^c latest 

klo^ cr\*tr»cs oy \ *tVic 



o 

❺ 


❺ 


tv\A <^c av"\ray usm^ 七 he 
y\vv3y objc^Vs ^usiiO mc*b^od* 


Gieale an Aj axRGquQGt object 

Tinnr n HF.T r rr p irn tt n rrtrirvr 
the blog.xml file from the 3 crvcr. 


DohC^ 


Handle the request. 
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YouCube is drivcw by its data 


Ruby is thrilled with the Ajax makeover of YouCube (it’s saving her a ton 
of time) but she does have a nagging usability concern related to what 
happens on the page while the blog data is loading. 



The latest vcirsior^s o( YouCube -files a\rc 

available a-t ivttp:/ / Y/v/y/.hcad-fiv-s-tlabs.dorw/ 

books/h-pjs/. 


<blog> 

<title>YouCube - The Blog for Cube Puzzlers</title 〉 
<author>Puzzler Ruby</author> 

<entries> 

<entry> 

<date>08/14/2008</date> 

</^try> GOt thS CUbS 1 ° rdSred - Ns a real pearl.</body> 
<entry> 

<date>08/19/2008</date> 

<body>Solved the new cube but of 
</entry> 

<entry> 

<date>08/16/2008</date> 


course, now I'm bored and shopping for 


a new one.</body> 


啡 d to get a hsadache toiling OTer the new cube . Gotta 

<entry> 

<date>08/2l/2008</date> 

a 7x7 « cube for sale onllne . Ylkes , 


nap.</body> 


The blog really works great with the 
data separated out into XML code, but is 
there a way to let the user know the blog 
is busy loading? Just something to let 
them know that the page is working. 


That one could be a beast.</body> 


exercise regimen to prepare.</body> 


</entry> 

<entry> 

<date>08/29/2008</date> 

</rr t UP Kith some fellow cubers to discuss the prospeot of a 7x7x7 oub ^ ^ feeiing _ 

<entry> 

<date>08/27/2008</date> 

3head the scary 7x7x7 cube. Starting a cental 

<entry> 

<date>09/3/2008</date> 

</entry^ Attended 3 outside of a local toy store that stopped ^ r^X，^ 

<entry> Wr% ^ ^ 

<date>09/5/2008</date> I ^ j- - . CliPE fmxdm 

</ ： ntr1： GOt neW 7X7X7 CUbS - C ° Uld ^ blog post for a „ hil " 

<entry> 

<date>09/19/2008</date> 

S~ ； e77 7 X k < ； L a g ：> nth thS " SW CUbe 1S 加山 7 -lve d! </ b | 

</entry> 

<entry> 

<date>09/24/2008</date> 

</en?ry^ last ni ^ h t a huge cube 

<entry> 

<date>09/26/2008</date> 

<body>These dreams just keep getting weirder. 

<image>cubeapart.png</image> 


was chasing me, and it kept yl 


now I'm seeing a cubd 


</entry> 
</entries 〉 
</blog> 


w 




udnw 

i 置 cc 篇 1 






I 騎 


IbllSMi 


"The blo^ is how d\riv(h 

by )(ML da-b... 



ihc4 




_ _ I 




: M 

! PscSfI 


?T.ra1. 




I _ 齡 


O 



— i^^rpen 


your pencil 


… But some usevs ave dor>-fuscd 
by -tKc blank pa^c *tKa*t affca^rs 
y/Wile {\\t da*ta is loadm^. 


Write the missing line of code in the loadBlog () function that displays 
a "wait” image named wait.gif while the blog data is being loaded. 

Hint: Use the main blog div, with an ID of "blog". 


function loadBlog() 


ajaxReq.send("GET", n blog.xml n , handleRequest); 
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sharpen solution 


(^Jterpen your pencil 

Solution 


Write the missing line of code in the loadBlog () function that displays 
a "wait” image named wait.gif while the blog data is being loaded. 

Hint: Use the main blog div, with an ID of "blog". 


function loadBlog() 






ajaxReq.send("GET ", n blog.xml n , handleRequest); 

丁 he wait irwagc Completely V-CpUdCS the 
blog ^Oh-tch-t while the blog daia is loadi% 


TV a^^a-tedi ^ ’一 y 

sed m flatc I 0 I 05 

br\ts bo \ti usev k” 0 Y/ 

七 he \>\o^ data is loadm^. 


伽 1 
川咖 

jQlOffj 
wait.gif 



iwcvHTML »s easier -to use ^ 
pdm -tWis cast s\Ut v/cVc addm^ 
^33 y/i*bii a Couple o-f attributes. 


is 

cn 



thereicire no ^ 

Dumb Questions 


The last YouCube blog entry contained an HTML 
〈 strong 〉 tag. How is that possible in XML code? 

Remember that XML code can be used to represent any 
kind of data. In this case, knowing that the body of a blog entry is 
getting injected into a web page, it is technically possible to include 
HTML tags that affect how the body appears on the page. In other 
words, the body content of a particular blog entry can contain HTML 
tags that are passed along as special formatting nodes in the XML 
code. This is a fairly tricky prospect, however, since we’d have to 
reconstruct the HTML formatting nodes in the HTML code for the 
page when injecting the XML data into the page. Instead of going 
down that path, the YouCube code elects to just pull the text content 
out of any HTML tags, leaving the formatting behind. Ruby is still free 
to add HTML formatting tags to blog content, possibly for a future 
version of YouCube, but they are ignored for formatting purposes. 
Their text does remain, which is a good thing. 


How does the ready state and status of an Ajax response 

work? 

These two properties ultimately come from the 
XMLHttpRequest object, and their job is to keep track of 
the state of the request, such as (0) uninitialized or (4) loaded, as 
well as the status of the request, such as 404 (not found) or 200 
(OK). It’s certainly possible to track these properties closely but 
it’s not necessary. All you need to know is that an Ajax request has 
completed successfully if the state is 4 (loaded) and the status is 200 
(OK). That’s why the handleRequest () function only leaps 
into action if both of these conditions have been met. 
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Pysfuwctiowal buttons 

Although the Ajax overhaul of YouGube has primarily taken place behind 
the scenes, out of the view of YouGube users, there is apparently a user 
interface issue that has come to light. More specifically, it seems the 
buttons on the page aren’t quite working as they should. 



Users are reporting that sometimes the 
buttons don’t work. They click and nothing 
happens. Not only that, but the blog isiVt 
visible when the buttons are acting up. 
Whafs going on? 


O 


o 


Po\r some reason, -the 
but-tohs 3\r ⑶’七 workmg all 
the tirwc, ahd -the blo^ 
ish 七 visible whch it happens. 


Broken buttons = Unh^py users 





Why aren’t the blog buttons working? When in 
the process of the page loading do you think the 
problem is occurring? 



Ruby is 乙 bu*t sVic 

really ^ccds -to *to *tV^ 

bo*t*bom Jc this problem. 
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when can I use it? 


The buttons need data 


The problem with the YouGube buttons is that they are only applicable 
when blog data is available. And since the blog data is now loaded from an 
external XML file, there will be a period of time, usually very brief, where 
the page has no data. During this period, the buttons make no sense at all 
and are only confusing users. 


Disabling the buttons is an excellent solution. 

Disabling the buttons while the blog data is loading is a simple 
and elegant way to solve the button problem. Since the Ajax 
request to load the blog data is issued when the page first loads 
the buttons can start out disabled and can be enabled in the 
han die Re quest () function, which is when we know the 
Ajax request has finished. 

To actually carry out the disabling, we need to use the 
disabled attribute of the 〈 input 〉 tag. This tag must be 
set to "disabled" in HTML code to disable a button. 
Conversely, it must be set to false in JavaScript code to 
enable a button element. 




<input type="button" value="Search the Blog" 
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JavaScript Magnets 


Use the magnets to finish the code in the YouCube page so that the blog buttons are disabled 
until the blog data finishes loading. You’ll need to use some of these magnets more than once. 


<html> 

<h <title>YouCube - The Blog for Cube Puzzlers</title> 

<script type="text/javascript" src="ajax. j s''> :’= 工 : 
〈script type="text/javascript- src= date.]s >〈/scnp 

〈script typ0 =n text/javascript > 

參參鲁 

function handleRequest() { 

if (ajaxReq.getReadyState()= 

// Enable the blog buttons 

document.getElementByld(_ 

document.getElementByld(_ 

document.getElementByld(^ 


4 && aj axReq.getStatus() 


200 ) { 


true 


</script> 

</head> 

〈body onload= M loadBlog () ； M > 

<h3>YouCube - The Blog for Cube Puzzlers</h3> 

<ima S rc= M cube.png" alt= M YouCube M /> n 

< in p Ut type=-button" id=”search” valued'Search the Blog 


onclick="searchBlog 0 


〈input type= M text" id= M searchtext" name= n searchtext" value- / 






onclick =n showBlog() 


> 


〈input type="button M id= 


'viewrandom” value="View a Random Blog Entry ， 

one 1 ick = n r3_ndoinBl og () ; /> 


search' 


</body> 
</html> 


Viewrandom' 


disabled 


showa. 


disabled' 


false 
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JavaScript Magnets Solution 


Use the magnets to finish the code in the YouCube page so that the blog buttons are disabled 
until the blog data finishes loading. You’ll need to use some of these magnets more than once. 



<html> 

<h <title>YouCube - The Blog for Cube Puzzlers</title> 

<script type=-text/javascripf src="aj ax. j s''> 

〈script type=-text/javascript'- src: date.]s >〈/scnp 


〈script type= M text/j avascript > 

• •參 

function handleRequest() { 

if (ajaxReq.getReadyState() 


• • • 

// Enable the blog buttons 


4 && ajaxReq.getStatus() 


200 ) { 


document.getElementByld( 
document.getElementByld( 
document.getElementByld( 


search' 



</script> 

</head> 

〈body onload= M loadBlog () ；"> wu 、 

<h3>YouCube - The Blog for Cube Puzzlers</h3> 

<img src="cube.png" alt="YouCube" /> ^ B1 , 

〈input tvpe= M button M id= n search ，， value= Search t g 


disabled 


"disabled 

■ -t ff 广 

ia= ,, seciL 


> 


onclick= M searchBlog() ； M 

HH|^^|§ ne= M search text M value= MM /> 


: valuer-Show All Blog Entr.es' 


disabled 


'disabled' 


⑽” Ivalue-View a Random Blog Entry 


onclick= M showBlog() 




disabled 


</bo 
</html> 



'disabled' 


oncli n r3_ndomBlog () ; /> 
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dynamic data 


Time-saviwg web-based blog additions 



Edit code + Upload files = Nofim! 


Ruby envisions a web page just for her that allows her to post a new blog 
entry by simply filling out a form. She could always be a click away from 
updating her blog, and all she’d need is a browser. No text editors, no FTP 
clients, just her cube puzzling enthusiasm. 


YouGube is now driven by dynamic data but Ruby has yet to fully 
reap the reward. The true benefit of dynamic data in YouGube won’t 
come home to her until she has the ability to use a web-based 
interface for adding blog entries. Instead of editing an XML file to 
add to the blog, she wants to be able to just enter a new entry on a 
Web page and have it saved to the server. _ 

广 ^ Tm sick of editing files and then V 

( FTPing them to the server just to update 、 

( my blog, rd like to update YouCube from J 

the comfort of my own browser! y o 


How could Ajax be used to add XML blog entries 
through a web page user interface? 


朽 D n YffuC«b« - Addin# to the Blog for Cube 

YutiCubi- - Adding Id Ihe fur Cubt Puzilcni 




Adding a 


out the *P_elds a 灼 d didkm 


3 3 butto 


Oyrte 


_ _ _- 

Forward rn this piny • 


Dfl|g ： ll 0 ^W 20 Qfi 
mKly: frilly Ifl 

Ima^c (optional); 

Add ibm New Slag Entry 


hew sdd blo^ uses 
不 0_ -fields -Po\T the -thv-CC 
pieces blog ch-tv-y data. 
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clients and servers...again 


Writing blog data 

When thinking of a blog addition in terms of Ajax, it’s possible to imagine 
an Ajax POST request that sends along the new blog entry data to the 
server, after which the server writes the data to the blog . xml file as a 
new blog entry. The Ajax response doesn’t really need to do anything in 
this case since there is nothing to return. 



Hang on! How exactly does the new blog entry 
get written to the blog.xml file on the server? 
I thought JavaScript couldn’t write files. And 
isn't JavaScript a client technology? 


JavaScript isn’t the answer for writing to a 
file on the server. 


JavaScript isn’t an option for writing to the blog.xml 
file on the server. In fact, you can’t even run JavaScript 
code on the server. This is because JavaScript is a 
client technology designed to be run solely in web 
browsers. In this particular case JavaScript doesn’t help 
us because we need to write a file on the server. This is 
not an uncommon problem, which is why server-side 
technologies are often used in conjunction with JavaScript. 

What we need is a technology similar to JavaScript but 
purely for doing things on the server. There are several 
options out there but one comes to mind that isn’t too 
complicated and works surprisingly well with XML data... 
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PHP to the rescue … this time 

A scripting language called PHP offers everything we need to write blog 
data to an XML file on the server. The real task involved is to read the 
XML file, then add the new blog entry to the existing entries, and then 
write all of the blog entries back out to the original file. But it all goes back 
to receiving the new blog entry data on the server as an Ajax request from 
the client browser. 


f ate： 1 0 / 04/2008 


PHP is a scripting 

tecknology tkat can 
carry out tasks on 
tke server. 


Client 





■the sc\rvc\r as -the iuta m ah 

POST 


pUys 3 simila\r 
3 s JavaSd^riP-/-. 


PHP 

as JavaSdv-ipt, 
but Oh the scv-vcv- 
tcad o( the dieht. 


ihs 


Date: 10/04/2008 

Body: "I'm really looking 

Image : 




TKc PHP stvift oy\ SCVVCV 

-takes 七 he blo^ errbry ar^d 
Vrtcs i*t "to 七 he blo^ %r«l -f lie- 


blog.xml 


You can think of PHP as sort of a server equivalent of 
JavaScript in a sense that it runs on the server and is 
capable of carrying out custom tasks... such as writing a 
blog entry to a file as XML data! 
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server side goodness 



Reap 9 

㈣ 


On the server side of YouGube, a PHP script handles the details of adding a 
new blog entry to the XML blog data that is stored in the file blog.xml. 

Load "the 广 aw )<ML 
•nvto the fVawBloa Vdv-idble. 


-fco see i-P 
the blog -pile exists. 


Co 威 v ■ 七七 V>c v-a>w blo^ 
da*ta dm )(ML 

data s*tvud*tuvc, v/K'idii 

•is a 1 。七 like a VOM 


<?php 
$filename 


'blog, xml' 


l-f blo^ -file docs^t 
dv-ca*tc 

)<ML blog dotumCh*t- 


if (file exists($filename)) { 

// Load the blog entries from the XML fi e 

$rawBlog = file— get—contents($filename); 

} 

else { 

// Create an empty XML document \„ 卄 / 只 9 y 

^rawRloa = ”<9 观 1 version=\"1.0\- encoding— utf-8\ •> . 

$ $ r r a a ： Blo g g ^blo g ><t 1 tle>YouCube - The Blog for Cube P-zlers</ 

-aut h or>Puzzler Ru^/authorXentr.esX/entr.esX/blo^' 


} $xml = new SimpleXmlElement ($rawBlog); 

// Add the new blog entry as a child node 

$ent ry = $xml->entries->addChildTentry ")； 
^ntry^addCh.ld (Mate-, $ _REQUEST [ Mate** ]) 
$entry->addChildrbody% stripslashes ($_REQUEST [ body 

if ($ REQUEST ["image"] != MM ) . 

$entry->addChild ("image", $_REQUEST ["image ]), 

// write the entire blog to the file 
$file = fopen ($filename,; 

f write ($file, $xml->asXML () ) ; ^6>V C \rw\ritc the blog ^ilc 

the hew blog da-ta. 


Add the hew blog chtv-y 
as a child hodc withih -the 

dsis stiru 匕 


<?php 


''message^ a 


echo $x; 


fclose($file) 


?> 


tliereiare no o 

Dumb Questions 


TWis PttP 七 is siored m 
i\^t -Pile addbloy^YfKf. 


Do I have to use PHP to write files 
on the server? 

No, not at all. There are all kinds of 
technologies out there for writing server 
scripts. You have Perl (CGI) and Java 
servlets to name a few, and they can do all 
of the same things that PHP can do. So if 
you’re more comfortable with one of these 
other technologies, by all means use it to 
create the server-side component of your 
Ajax applications. 


Can I get away with using Ajax 
without having to use a program on the 
server at all? 

In some cases yes but in most cases 
no. Keep in mind that all but the most 
simple Ajax requests involve the server 
receiving data from the client and then 
doing something with it, such as looking 
up something in a database or writing 
something to a file or database. The main 
YouCube blog page is a good example of an 
Ajax request that is simple enough to 


not require any server scripting. Most Ajax 
applications aren’t so lucky, so in most cases 
you will need to do some degree of coding 
on the server. The real issue is whether 
or not the server can just send back an 
entire file, as is the case with blog.xml, or 
if it has to somehow process data and do 
something with it on the server, such as 
write it. The good news is that the kinds of 
scripts required on the server for many Ajax 
applications are quite simple, and can often 
be figured out without a mastery of a server 
scripting technology. 
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PHP has needs, too 

Unlike JavaScript, which is inherently supported in modern browsers, 
PHP support isn’t always a foregone conclusion on the server. So before 
you go posting PHP files to your Web server, it’s probably worth checking 
with your system administrator or Web hosting service to see if PHP 
is supported. If it isn’t, you’ll need to do all you can to get it added, or 
possibly find a different Web server. The PHP script for YouGube simply 
won’t work unless PHP is supported on the server. 


^ — PHP 

Evch i-P i-t doesn’t, you r^ay 
Make sure your Web 《 be able -to 狀七 11 _七 you\rscl-P 

server supports PHP. ah ^dirhihis-tira-tov 

•nvto ihs-tall'mg it Youll 

dc-Pihi-tcly heed it Ajax/ 



Running a PHP 

script may require 
some tweaks to 
your Wet server. 


Support for PHP on your web server is the first hurdle. The second hurdle 
is figuring out where to place PHP files on the server. In many cases it’s 
OK to place PHP files in the same folder as your HTML web pages and 
external JavaScript files. However, some PHP installations are pickier 
and require PHP scripts to be stored in a special folder. Again, this is a 
question that can be answered by a system administrator. 




\y\ dascs you C3Y\ 

short PttP stv'ifb m {}\t 

same -foldcv- youv 

Web pays av-c s-toved- 



addblogentry.php 


Once you’ve figured out where the PHP file 
should be placed on your web server, you’re 
ready to copy it there and continue building 
the YouGube blog addition web page. 




youcube.html blog.xml 


ajax.js 
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the php part of the equation 


Feeding data to the PHP script 

With PHP working on the server and the PHP script file in place, we can 
more closely examine what the PHP script needs in order to write data to 
an XML file on the server. This will help us arrive at a design for the Ajax 
request that provides the server exactly what it needs to carry out the task. 

The PHP script is expecting the data for a new blog entry, which we know 
consists of at least two pieces of information, and potentially three. 


Data is fed to tire 
PHP script tkrougfli 

an Ajax request. 


Pate 

The date of the blog entry. 

Pody 

The body text of the blog entry. 

Image 

An optional image for the blog entry. 



Date : 10/04/2008 

Body : "I'm really looking 

Image •• 


丁 he dlicht code 

must package -the data 
^ -Pov-r^at that be 
scht "to the scv-vcv- as pavt 

o*P 


This information must somehow get packaged up and sent to the server as 
an Ajax request, where it is processed and saved to the blog.xml file. 


The sc\rvcv-s job is 
"to the Ajax 

ahd -Peed its 

data ih-to the PHP 

sd\rip*t -Po\r p\rodcss*m 



At this poiht the 
blog Chtiry has bcch adde< 
"to the blog.xrwl -file, and 

appear oh the /ouCubc 


blog au-toma-tidally the 

tirwc the blog pay is 
loaded ov- vc-Pv-cshcd. 




The PttP takes cart 

J? 6 ov\vcv*b >^5 -tv^c W 05 
c^Y /MU 
\i bo -tV^c Wo^.^l 


The challenge is then to come up with a design for the blog addition web 
page that first presents a user interface for entering a new blog entry, and 
then gathers that information and shuttles it to the server in an Ajax 
request. The good news it that we don’t really need to do anything in 
response to the request other than maybe confirming that the new blog 
entry has been saved successfully. 
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rpen your pencil 


Sketch out the design for the YouCube blog entry addition web 
page, making sure to show exactly how the Ajax request and 
response factor into the flow of data. 
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sharpen solution 


(^Jterpen your pencil 

Solution 


丁 he blog dddi'tioh Web pay 
has \o\rwx -fields -pov- Chtcv-ihg 
mw blog cht\ry daia. 


S O ^ YnuCubt - Add*^ id it# «oa *or CuM Puzzim 

YouCubt - Addiee io Hit Bfeft for Cube Puiakrs 


Sketch out the design for the YouCube blog entry addition web 
page, making sure to show exactly how the Ajax request and 
response factor into the flow of data. 


The v-c«\ucs*t is d POST v-c«\ucs*t do^sistmg 
-the -follov/mg pieces o-f dd*bd ： 

^ Bloj date 

来 Bloj body 

来 Bloj imd^e optional) 


o 


mffi ： |LQ^M^WS_ 

B_:b-mrwitwfonwil toiMimjaiiiWTV 刪 1 K 

Md ih* 醎的 


ifltiV 1 . 4 ft 

otvclicW. 


TV blo^ data is sent 
•to 七 he scv-vcv as da*ta 
•m 七 POST vc<\ucst 


Clidkihg -the Add 
bu*ttoh causes the 
W09 addi-tioh Ajax 
^c^ucs-t -to be scht 


fate: 10/04/2008 

imai *： Ml，m 如叫 ^ 叫 ... 


■nw^EW Wcrg^fltJV^aj. iWTWlFulWri 私 d. 


f I 


3 


"The ^licKrt ho*ti-pics 
■the usev that the hew 
^°9 Ch-tvy has bcch 
su^^css-Pully added. 





The Aja% vespo^sc does 灼’七 
vc*tuvr\ ar^y d 3 *t 3 bc^ 3 usc 
dien 七 does / 七 r\tt& 

ar\yt^»^5 ^ vc*tu\rr\. 



blog.xml 


Server 





丁 he sc\rvc\r whites the hew 

blog Ch-t\ry as )(ML data 

"to 七 he blo0.Xrv\| -pile. 
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fretting it up: Posting blog data to 
the server 


An Ajax POST request is a little more involved than a GET 
request because it requires sending data to the server. Although 
the POST request supports different ways of packaging up data 
for the server, the trusted technique of URL encoding the 
data fields works just fine. This technique is the same one that 
browsers use to pass fields of data to a server in the URL of a 
web page, and is distinguished by the ampersand characters (&) 
that are used to separate each piece of data. 




n date=10/04/2008&body=I'm really looking forward... &image=" 


Ah individual ^\tu of daia 一 
^ohsists of a ha^c/valuc 



pictc da*ta scpav-a*tcd 
(rovn o*tKcv-s by ar\ a^fev-sarui. 


This data format requires each piece of data to have its name and 
value separated by an equal sign (=), and then each name/value pair is 
separated from other data by an ampersand (&). The format is called 
URL encoded, and has its own data type that gets set as the data type 
of the Ajax POST request. 



"application/x-www-form-urlencoded; charset=UTF-8 


nis is i\\t oWitial data 
o-(* URL- 

ar\d must be spcti-f 'icd as 
pav*t POST vc^ucst- 


With the blog entry data formatted into the URL-encoded format and 
the data type of the POST request, we’re ready to put together the 
request code and send the data to the server so that it can be saved to 
the blog.xml file. 






Package the following pieces of data into the URL-encoded format, suitable for a post request. 

releaseDate : 01/13/1989 


title: Gleaming the Cube 


director : Graeme Clifford 
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satisfy your curiousity 



Package the following pieces of data into the URL-encoded format, suitable for a post request. 


releaseDate : 01/13/1989 


title: Gleaming the Cube 


director : Graeme Clifford 


“ti 七 le 二今 loiM 仏 e Cubcfv-clcascDatc—Ol/1 div-cd*to\r—Cli-f-fo\rd w 


If the YouCube blog addition script 
doesn’t require any data from the server 
in the Ajax request, why bother handling 
the request at all? 

The reason is because knowing that a 
request has completed is still very important. 
So even though we don’t need the server to 
return any data in response to the request, 
we still very much need to know if and when 
the request has successfully completed. 
That’s what allows the script to know when to 
display the alert that confirms the new blog 
entry addition. 

Could a GET request also be used 
in the blog addition script? 

Yes, technically it could. It's still 
possible to send data along to the server in 
a GET request, but you have to specify it 
directly in the URL of the request. That’s not 
really the problem—the problem is that GET 
isn’t intended to be used in situations where 
the state of the server is changing. And in 
this case the state of the server is definitely 
changing due to it writing a new blog entry 
to the blog.xml file. So a POST request is 
the right approach if for no other reason than 
because it clearly indicates the intent of the 
communication to the server. 



Dumb Questi9ns 

Since it takes time for the server 
to process the Ajax request and save 
the blog entry, is there a problem if the 
Add button gets clicked again before the 
request finishes? 

Yes, it is a problem. Each click of the 
Add button cancels the current Ajax request 
and issues a new one. Although that may 
very well be the goal of someone clicking 
it twice, the user interface would be much 
clearer if the option to click the button is 
simply removed while the request is being 
processed. So the code to add a new blog 
entry should disable the Add button while the 
Ajax request is taking place, and then enable 
it again once the request has finished. Small 
touches like this to the user interface of a 
JavaScript application can go a long way 
toward making it more intuitive and easier to 
use, resulting in happier users. 

What happens to the spaces in 
the blog data that gets formatted into 
a URL encoded string? That seems to 
sometimes be a problem with URLs. 

The spaces don’t present a problem 
in this case because Ajax automatically 
handles processing the data and making 
sure it gets to the server in a suitable format. 


Since the image is optional in the 
blog, does it always have to be passed 
along to the server when adding a new 
blog entry? 

No, it doesn’t have to be. But keep in 
mind that there’s nothing wrong with sending 
an empty piece of data where there is no 
value following the equal sign in the URL 
encoded string, like this: 

"date=...&body=...&image= M 

In this example, the image data field is still 
sent to the server even though it doesn't 
actually contain any data. This is where the 
PHP script on the server shines, because it 
is smart enough to know that the image field 
is empty, and therefore the new blog entry 
doesn’t have an image. 
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rperi your pencil 


Write the missing lines of code to finish the addBlogEntry () and 
handleRequest () functions in the YouCube blog addition script. 


function addBlogEntry() { 

// Disable the Add button and set the status to busy 


// Send the new blog entry data as an Ajax request 
ajaxReq•send( n POST", "addblogentry•php n , handleRequest, 
"application/x-www-form-urlencoded; charset=UTF-8 ", 


function handleRequest() { 

if (aj axReq.getReadyState() == 4 && ajaxReq.getStatus() == 200) { 

// Enable the Add button and clear the status 


// Confirm the addition of the blog entry 

alert ("The new blog entry was successfully added."); 
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sharpen solution 



Write the missing lines of code to finish the addBlogEntry () and 
handleRequest () functions in the YouCube blog addition script. 


TV^ Add button disabled wWile a 
W 03 is bemj saved *to server. 

function addBlogEntry() { 

// Disable the Add button and set the status to busy 

dodumc^*t.jc*tElcmc^*tBy|d( u add w ).disablcdl — *tvuc ； 

dodumc^*t.5C*tElcmc^*tBy|d( W s*ta*tus W ).*m^c\rH'T/l/IL — w Add*mJ... 



This is 

a POST. 


TKc sla-tus a^rca 
i\\t d'isflaYs a 

w bus/ message so i\\t 
usev* ky\ov/s av*c 
oy \ sow»C*tKm 3 . 


// Send the new blog entry data as an Ajax request 


ajaxReq.send( n POST n , "addblogentry.php ", handleRequest, 
"application/x-www-form-urlencoded; charset=UTF-8 ", 


A sc\rvc\r PHP s^v-ipt 
is used -to pvodcss 
the blog ch-fcv-y a^d 
save it -fco the blo^ 
-Pile oh the scv-vcv-. 


w da*tc 二 + do^umc^*t.O|c*tElcmc^*tBy|d( w da*tc w ).valuc + 
w fbody— w + dodumcntyt&cmcrrt 衫 ylddodyOvaluc + 

W fi 你 a 3 e=1 ’ + do^umc^tjciElcmc^-tBYldir'ima^O.valuc 、 ； 

Assemble Yto^tsi POST data 心。你 
^ - ^ i\)t date, body, ar>d i^a^c fields. 


function handleRequest() { 

if (aj axReq.getReadyState() 


4 && ajaxReq.getStatus() 


200 ) 


// Enable the Add button and clear the status Chcdk *to ak 

dodumc^tjctElcmc^tByldO'adld^O.dlisablcd =• -false ； su\rc £hc blog 

^ - s ^vc V-C^UCS-t 

do 匕 umeirrtytElem 伙 *tByld( l Vta*tus”).nrme\rHTML 二 …) -Pihishcd 


sud^css-Pully. 


// Confirm the addition of the blog entry 

alert ("The new blog entry was successfully added. n ) 


Enable tV^c Add Wtfem ad dear 

•tV^c s*ba*tus av-ca 

blo^ CK\*tv-y V^as misled sav’m 汐 
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Ploggiwg made easy 


Ruby can’t believe how much of a difference it makes being able to update 
her blog without having to open a file, edit code, and upload the file to the 
server. Not only is her blog now truly data-driven, she is feeling a lot more 
inspired to write some new blog data! 


The page doh-Piv-ms that 

the bloft Chtvy was 

suddcsstully added- 



rn 6 V&uCubr - AJding to Ihe EU^ for Cube Pta£zlsrs, 

YouCulw * AddLiie Eq Ihu BUifi Tor Cutw I'makrs 




[>*t ； P/ 0 V 2 M 3 


aody ： p'm ^ly Iggkmg forwjjdla this pii-^c aJrty J：i ihe end of sh* mon^ 


1 ™c 、 


bmgc (optiixial): 

tht Wiw fflpg Entry! !j 


The page lets -the 
usc\r khow the 
妁 〜 blog Chtvy is 

bcihg added. 

YouCubr 


Ruby cr\tcv-s the 
blo^ embry ^ *tViC bloj 
add v/ck pay- 


The hew 
how appeavs 


blog chtv-y 
3\rs oh the 
ouCubc blo 0 . 
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usability trumps all 


Making YouCubc more, uh, usable 

You don’t become a third-degree cube puzzle black belt without a serious 
attention to detail. So it’s not terribly surprising that Ruby wants to make 
the blog addition page absolutely perfect. And Ruby has learned that 
Ajax applications are known for their attention to detail when it comes to 
usability. So she wants to make some improvements to the usability of her 
new page so that it’s on par with modern Web pages. 


I want to maximize my 
blog entry efficiency so 
that I can post faster, and 
hopefully more often. 


o 



Maximizing YouCube blog data entry 

Since the vast majority of blog entries are made in the present, 
Ruby figures it will save her some precious keystrokes if the 
date field of the blog form is automatically filled with today’s 
date. And since she is going to use the current date for most blog 
entries, she’d like to place the input focus on the body field of 
the form. That way she can start typing away on a blog entry 
the moment the page opens. Sure, none of these changes are 
absolutely critical to the blog working, and they aren’t directly 
related to Ajax, but they dramatically improve the “feel” of the 
page, which is very much in the spirit of Ajax. Besides, it will help 
ensure that Ruby keeps the blog up to date by posting regularly. 

Au-to—fill this -field with 
the ^uvvch-t date. 


Set the ihput -Po^us heve - 

that Ruby 匕如 immediately 

Chtcvihg blog iex 七 . 
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Auto - fill fields for your users 

If you recall, the format of YouGube blog dates is MM/DD/YYYY, 
which means we need to make sure to format the current date in the 
auto-filled date form field to the same format. So we need some code 
to format the current date as MM/DD/YYYY 


You already created a Date method 
that does this but ifs stored in the main 
YouCube blog page. Is there a way to 
share it with the blog addition page? 


Sharing common code is always a good idea to 
prevent duplication. 

We certainly don’t want any duplicate code floating around in 
YouGube that we have to maintain in two different places, so 
sharing the date-formatting code between the two pages is a great 
idea. And there is definitely a way to store the code in one place 
and then share it in any page that needs it. 






How would you share the shortFormat () code 
across both YouCube pages? 
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import export 


Repetitive task? How about a fuwctiow? 


Sharing JavaScript code across multiple web pages involves breaking the code 
out into its own file, or module, and then importing this file into each of the 
pages. We’ve seen this done already with the Aj axRequest object, which is 
stored in the file ajax.js, and then imported with the following line of code: 

TiiC <Jc JavaStv-ip*t 
tile is se 七 七 0 如 S\r 6 attvibutc 
Jc <st\rip*t> 

<script type="text/j avascript" src= M aj ax.j s"> </script> 



Tke lamiliar 

〈 script〉tag is 
used to import 
JavaScript code 
tkat is stored in 


The shortFormat () method of the Date object can accomplish a 
similar goal by being placed into a file named date.js, and then imported 
into each of the YouGube web pages. 


external liles* 



A similar <script> tag that was used for the Ajax code can then be used 
in each of the YouGube pages to import the script code stored in date.js. 


<script type= n text/j avascript" src= M date.j s"> </script> 

da-te js flic arc imported 
smjlc <sCr\^b> taj. 



^7 date.js 

The same JavaS^v-ipi Codt 
,s s ^v-cd ih two 
thanks -to s-tov-'mg -the Codt 
,h cx-tcirhal -file. 


It’s almost never a bad idea to break reusable JavaScript code into its own 
file that can be shared in more than one place. 
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r^U^rpen your pencil 


Write the code for a function named initForm () that is called 
in the onload event handler of the YouCube addition script. The 
function must initialize the date field with the current date, and 
then set the input focus to the body field. 
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sharpen solution 


(^Jterpen your pencil 

Solution 


T\\t date -f ield is set 
■to 七 tu\r\rcr\*b date. 


Write the code for a function named initForm () that is called 
in the onload event handler of the YouCube addition script. The 
function must initialize the date field with the current date, and 
then set the input focus to the body field. 


•mi'tPoVmO { 



心七七 he ihpu 七 -podus 
"to the body -field. 


. 4 ?.— 於话 拔 yi 4 ( w 和七?奸 d 

do^umc^'t . 於话 银 y.l.04y.” ? 


} 



JJtiljfjSfiMilJy iinisJici woftici£ oiuJic ftiog 

by Fuzzier 

rmtcS?Looking ftn> 4 rd »ihls- pusik P&W m w 

b y Pu^r r R^y 


Plog productivity soars 


Ruby has finally reached utter satisfaction with the YouCube blog. Her 
blog is both data-driven and user-friendly thanks to Ajax and a ruthless 
commitment to detail that only a master puzzler could muster. 


丁 he ihpu-t -Podus is set 
■to the body whch the 
p^gc -Pi^rst loads. 


TV date »s au*t© 州 ataalb/ 

sc*b *to *b^c tuwerrb date 
^\\ cy \ tiic fay oferts. 


a 




TcuCube 


lauCube 


Lutw 1 AdtfliE 10 IIil^ niog r or 

1 ^/ 11/2003 


t-ubf Vunkrs 




BDCfji: 


lrn fims-hEii wrftirw 


scnpi 


Eimgc fopiHxnaj) 


594 Chapter 12 




























dynamic data 


JavaScriptcross 


Are you feeling dynamic? How about some data to 
go with that perky attitude? Crossword data, that is. 
Get to it! 



Across 

2. A server scripting technology that complements 
JavaScript in Ajax applications. 

3. The server's answer to an Ajax request. 

5. This kind of function gets called when an Ajax 
request is finished. 

8. This technology can be used to Web pages much 
more responsive. 

9. This kind of data makes Web pages much more 
interesting. 

10. The standard JavaScript object used to support 
Ajax functionality. 

12. A request type that usually just requests data 
from the server. 


Down 

1. The ML in HTML stands for.language. 

2. A request type that usually involves a state 
change on the server. 

4. The method of the AjaxRequest object used to 
issue a request. 

6. The custom object created to simplify the use of 
Ajax. 

7. The X in XML stands for this. 

10. This makes <blog> 5 <author>，and <entry> 
possible. 

11. When an Ajax application asks the server for 
data. 
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JavaScript cross solution 



JavaScriptcross Solution 
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Fold the page vertically 
to line up the two brains 


and solve the riddle. 



V 嫩 


Wkat kas Ajax given Ruty? 


I Vs d o( m’mds, <r 





I am falling apart, 
one piece at a time! 


睡、 0 


AjaxRequest 


Ajax kas given Ruty so muck, it’s 
a kard tkingf to nail ctown. Tltere’s dynamic 
data lor one tkingf, wkick kas macte 
cute tloggingf a lot easier. Ruty can now talk 
atout ker cute puzzles witk ease. 
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continuing your ; ourney 


Where do you go from here? 


Well you’ve made it through Head First JavaScript, and are ready to 
continue on your journey of creating interactive user experiences with 
JavaScript and beyond...but where should you go next? Here are a few 
things we think you might be interested in as you take your next steps 
building and creating applications for the wild world wide web. 


TRY the Head First JavaScript Forum 

Exasperated over expressions? Overwhelmed by operators? Or are you 
just curious to share your latest JavaScript creation with the Head First 
community? Stop in for a spell at the Head First JavaScript forum at 
Head First Labs {http: / / zvzvw. headfirstlabs. com) and join in one of 
the discussions...or start a new one! 


REAP another book 





ouve got the essentials down, so get 
ready to dig deeper into the ins and 
outs of more advanced JavaScript. 

avaScript the Definitive Guide 

JavaScript & DHTML Cookbook 


LEARN more from other sites 

Quirksmode zvzvzv. quirksmode. org 

Unfortunately, different browsers sometimes have their own way of 
doing things with JavaScript. Get the scoop on JavaScript browser 
inconsistencies at Quirksmode. 




Mozilla JavaScript Reference 
http: / / developer, mozilla. org/en/docs /JavaScript 

It won’t be long at all until you’re venturing off the beaten bath and 
need to find out more about built-in JavaScript objects. Explore every 
nook and cranny of JavaScript with Mozilla’s online reference. 


Prototype JavaScript Framework 
http: / / zvzvzv.prototypejs. org 

Tempted to try a third-party library of reusable code to take JavaScript to 
a whole new level? Prototype is one of the best, and it’s completely free! 
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Symbols 

! (negation operator) 164, 165, 218 

!= (inequality operator) 163 

&& (AND operator) 217 

++ (increment operator) 202 

— (decrement operator) 202 

< (less than operator) 164 

<=(less than or equal to operator) 164 

==(equality operator) 163 
versus = 164 
=versus == 510, 532 
> (greater than operator) 164 
>=(greater than or equal to operator) 164 
|| (OR operator) 218 

A 

action 6-7 
Ajax 541 

asynchronous Ajax request 560 
connection between XML and Ajax 548 
custom callback function 564 
GET request 554-555 
handleRequest() 565 
Handling Ajax Responses 568 
PHP 579-584 

running scripts 581-582 
POST request 554-555, 585 
ready state and status of an Ajax response 572 
request/response 561 

YouCube project 563—564 
URL encoding 585 
XML 549 

YouCube project 550-551 


AjaxRequest object 556—561 

getResponseText() method 565 
getResponseXML() method 565 
handler 559 

handleRequest() function 569-570 

making sense out of 559 

postData 559 

postDataType 559 

send() method 560 

type 559 

url 559 

alert() function 19, 297 

alert boxes 297, 314 
debugging 507-509 
empty 162 

resolving 163 

problems debugging with 515 
problems with 345 
validation 309 

anonymous functions 279 

apostrophes 21 

debugging 502, 532 
escape characters 511 

appendGhild() method 361 

arguments 252 
altering 260 
limits 260 

Array. sort() method 423 

arrays 198 

Arrays Exposed 200 

as objects 420 

data stored in 201 

form array 293 

indexed 199, 201, 202 

mapping array to seat images 204 

mining data 199 
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arrays (continued) 

searchable objects 424-432 
sorting 418—423 

compare() function 421 
function literals 422 
two-dimensional 231-234 

2-D Mandango Up Close 236—237 
accessing data 233 

Arrays Exposed 200 
asynchronous Ajax request 560 
attributes in forms 293 

B 

Bannerocity project 290—292 
data validation 302 
dates 315—316 
email addresses 334-337 
phone numbers 333 
ZIP codes 310 

eliminating three-digit years 330—331 
non-empty validation 300—303 
placeOrder() function 313-314 
validating length of data 305-306 

Blog object 404, 406, 408, 412—413 
actions 441 

adding images 476-479 
adding methods 439-441 
containsText() method 441—442, 450 
extending objects 467—470 
method overload 451 
signature property 460—465 
sorting 472-473 
this keyword 451 

toHTML() method 450, 456, 479 
toString() method 450 
updated 443—444 

blogSorter() class 473-474 

boolean data type 35 

boolean operator logic 218 


boolean operators 

difference between normal and logic operator 219 
parentheses 219 

break statements 178, 179, 212 

Browser Exposed 98 

browsers 89 

clearing variables 111 

client-server interactions 86 

closing browser before timer expires 97 

const keyword 46 

cookies 88 

cookies and browser security 124 
difference between Web client, browser, client window, 
and browser window 101 
error console 491 
history 88 
JavaScript code 13 
metrics 88 

page loading issues 522-523 
resizing browser windows 106—107 
resizing iRock 102—103 
running JavaScript code 88 
syntax errors 500 
trusting debugging messages 492 
wrong-sized graphics 99—101 

bugs (see debugging) 

built-in functions 21 

Bullet Points 

AjaxRequest object 560 
arrays 202 
break statements 224 
callback functions 282 
capitalization 69 
classes 459 

className node property 379 
client window 104 
comments 173 
compound statements 150 
createElement() method 385 
CSS style class 379 
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data types 49 
Date object 414 

debugging in browser error console 498 

DOM 364 

events 21 

form fields 307 

function literals 282 

function references 282 

functions 21， 259 

global versus local variables 173 

if statements 150 

initializing data 69 

innerHTML property 364 

loops 202, 224 

NaN (Not a Number) 69 

objects 399 

prototypes 459 

quotes and apostrophes 511 

regular expressions 330 

return statement 269 

sorting 432 

syntax errors 511 

this keyword 459 

timers 104 

two-dimensional arrays 235 
XMLHttpRequest object 560 

buttons, disabling 574-576 

c 

callback functions 277, 281, 282 
onload event handler 283 
versus normal functions 276 

callNum variable 

putting watch on 515 
showing up as NaN 526-527 

GamelGase 52, 62 

capitalization 52, 62, 69 
keywords 46 
objects 459 

changeScene() function 157, 162, 367 


character classes 336 
checkWinner() function 504—505 
child nodes 353, 363 
class-owned instance methods 471 
classes 

class properties versus global variables 464 

class properties versus instance properties 464, 466 

properties 462-463 

storing methods 455 

versus instances 452-453, 459 

class methods 471 
calling 474 

className node property 379 
clearlnterval() function 97 
client-server interactions 86 

clients 86, 89 

Browser Exposed 98 
controlling 89 

difference between Web client, browser, client window, 
and browser window 101 
persistence 116 

client window 99 — 101 
percentage of size 103 
resizing iRock 102—103 
width and height 104 

code separation 270—271 ， 274, 283 
Code Up Close (Mandango project) 215 

comments 166， 167 
code inside 173 
disabling code 527-529, 531 
semicolon 173 

compare() function 421 
comparison operators 164 

compound statements 148, 149, 150 
inside for loops 201 
variables inside 173 

concatenating strings 64, 69, 76 
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constants 40, 46—47 
explicitly setting 49 
uninitialized 60—61 
versus variables 43 
when to use 49 

const keyword 46 

constructors 402—403, 405, 459 

content, separating functionality, content, and 
presentation 270—271 

context 169 

continue statements 212 
converting text to number 65, 69 
cookieEnabled property 126 

cookies 88, 112—115 

browser detection 129 
browser security 124 
greeting users with 120—121 
messages 129 
names 125 
permanent 125 
shared across browsers 125 
touchRock() function 122—123 
versus storing data on server 125 
where stored 125 

createElement() method 383, 385 
createTextNode() method 361,371 

CSS 6—7 

interactivity 8 

separating HTML, JavaScript, and CSS code 
270-271 

using DOM to tweak CSS styles 372—373 
CSS style classes 375 

manipulating individual styles 379 
versus JavaScript classes 372,374 

curly braces 

debugging 532 
missing 493—494 
switch/case statement 178 

custom objects 450-484 


D 

data 

accessing form data 293 
bad form data 298-299 
dynamic (see dynamic data) 
entering into forms 295 
non-empty validation 300—301 
protecting integrity of 75 
tagging custom data with XML 543 
validation 294-296, 302 
alert boxes 297 
dates 315-316, 329 
email addresses 334—337 
length 305-306 
phone numbers 333 
ZIP codes 310-312 
(see also regular expressions) 

data types 35, 45 

explicitly setting 49 
objects 398 

data visibility 169 

Date object 97, 410-411,414 
accessing parts of a date 417 
converting objects to text 415—417 
getDate() method 417 
getFullYear() method 417 
getMonth() method 417 
shortFormat() method 592 
sort comparison 423 
toString() method 416 

dates, validating 315-316, 329 

debuggers 511 

debugging 486—536 

=versus == 510, 532 
alert boxes 507-509 

problems debugging with 515 
apostrophes 502, 532 
browsers 492 
cheat sheet 505 
checklist 532 
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curly braces 532 

custom debugging console 517-520 
debugging 521—523 
disabling code 527-529 
error console in browser 491 
escape characters 503, 532 
limitation 511 
Firefox 489—491 
Internet Explorer 488, 491 
logic errors (see logic errors) 
missing curly braces 493-494 
Opera 488 

page loading issues 522-523 
parentheses 532 
poor scripting 512-513 
quotes 501-502, 532 
runtime errors 524—525 
Safari 488 

shadow variables 530—532 
syntax errors (see syntax errors) 
trying to references undefined variable or 
function 511 
typos 496, 497, 532 
undefined variable error 495 
watch 508, 515 

watching variables (see watching variables) 
Debugging with Alert 509 

decisions 146 
complex 218 
tiered 154 

decision tree 152-153 
path 161 

pseudocoding 158 

devices, wrong-sized text and graphics 99—101 

disabling code 527-529, 531 

div element versus span element 371 

<div> tag 346, 362 

document.body. clientHeight 100 

document.body. clientWidth 100 


Document Object Model (DOM) 352-392 
appendGhild() method 361 
changing node text 360—361 
child nodes 353, 363 
classifying DOM data 354 
createElement() method 383 
createTextNode() method 361 
DOM Building Blocks 362 
DOM tree 357 
element attribute 354 
ELEMENT node 354, 362 
hierarchical tree of nodes 353 
manipulating individual styles 379 
nodes 353 

properties 357 
style property 377 
types 354 

visibility style property 377 
properties 359 
removeGhild() method 361 
replacing node text with a function 368—369 
TEXT node 354, 362 
top node 354 

using DOM to tweak CSS styles 372—373 
Web standards 365 

DOM 

extracting content from nodes of XML data 566 
XML 549 

DOM Building Blocks 362 
dot operator 396-397 

Duncan’s Donuts project 55-84 
calculation problems 58-59 
fetching data from Web pages 71 
intuitive user input 77 
parseDonuts() function 79 
processing orders 56-57 
searching user input 78 

string concatenation versus numeric addition 64 
duplicate code, eliminating 254-256 
dynamically resizing images 108—109 
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dynamic data 538-598 
Ajax (see Ajax) 

HTTP request/response 561 
PHP 579-584 
URL encoding 585—586 
XHTML 545 

dynamic text decisions 370 

E 

ELEMENT node 354, 362 

elements 
IDs 71 

versus its value 76 
email address validation 334 

empty alert box 162 
resolving 163 
empty strings 72 
encapsulation 472-473 

error consoles 491 

watching variables 516 
errors 

logic (see logic errors) 
runtime 524—525 
syntax (see syntax errors) 

(see also debugging) 

escape characters 503, 511, 532 
limitation 511 
event handlers 278 

events 18 

functions 272 

onload 20, 105 

onresize 107—109 

where they come from 21 

wiring through function literals 279—280 

without connected code 21 

(see also callback functions) 


F 

findSeat() function 206, 211， 258 

Firefox, debugging 489—491 

Fireside Ghats 

bad form data 298-299 

class properties versus instance properties 466 

for loops and while loops 226—227 

local versus global variables 172 

normal functions versus callback functions 276 

persistent data storage 114 

poor scripting 512-513 

variables versus constants 43 

XHTML 546 

floor() method 436, 437 

for loops 192-193, 226-228 
code not being called 227 
infinitely looping 201 
Mandango 197 

forms 13, 292 

accessing form data 293 
alert boxes (see alert boxes) 
arrays 293 
attributes 293 
bad form data 298-299 
data validation 294—296, 302 
alert boxes 297 
dates 315—316 
ZIP codes 310-312 
(see also regular expressions) 
entering data 295 
fields 294 

accessing form object 294 
size 309 

generating events 296 
help message, clearing 309 
help text element 309 
HTML size attribute 309 
non-empty validation 300—301 
onblur event 295-297 
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onchange event 295 

onfocus event 295 

validating length of data 305-306 

functionality, separating functionality, content, and 
presentation 270—271 

function literals 279, 281, 282 
event wiring through 279—280 
onload event handler 283 

function references 278, 282 

functions 19, 243-288, 398 
alert() 19, 297 
arguments 252 
limits 260 

as problem solvers 246 
built-in 21 

callback (see callback functions) 
calling 273 
changeScene() 162 
clearlnterval() 97 
custom 

changeScene() 157, 367 
checkWinner() 504—505 
createTextNode() 371 
findSeat() 206, 211 
findSeats() 258 
getSeatStatus() 267—268 
getTemp() 262 
greetUser() 121 
heat() 251, 263 
initSeats () 205 
parseDonuts() 79 
replaceNodeText() 369 
setSeat() 257-258 

showSeatStatus() 268—269, 272—273, 279 
touchRock() 24, 122—123 
validateDate() 329 
validateLength() 306 
validateNonEmpty() 300—303, 329 
eliminating duplicate code 254-256 
events 272 

knowing when to use 249 
location in code 260 
missing arguments 477 


naming conventions 249 

normal functions versus callback functions 276 
nuts and bolts of 247 
parseFloat() 65 
parselnt() 65 

decimal numbers 76 
passing information 252 
placeOrder() 313—314 
purpose of 249, 260 
referencing 273—275 

replacing node text with a function 368—369 
returning information 261—263 
setlnterval() 95, 97, 104 
setTimeout() 94, 104 
trying to references undefined variable or 
function 511 

turning into methods 441—442 
validateRegEx() 326—327 
versus compound statements 149 
versus variables 274 

G 

getElementById() method 71, 76, 101 ， 102, 347, 352, 
358, 375 

getElementsByTagName() method 358 
GET request 554-555, 561 
getSeatStatus() function 267—268 
getTemp() function 262 
getText() Function Up Close 567 
global scope 171 

global variables 169—173 
script level 173 
versus class properties 464 

greetUser() function 121 

H 

Handling Ajax Responses 568 

head of page, accessing code from 522-523 

heat() function 251, 263 
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help message, clearing 309 
help text element 309 
hierarchical tree of nodes 353 
HTML 6—7 

accessing elements 347-348, 522 
callback functions 277 
interactivity 8 

separating HTML, JavaScript, and CSS code 270- 
271 

size attribute 309 
versus XML 542 
XHTML 545 

HTTP request/response 561 



id attribute of <div> tag 346 

identifiers 50 

capitalization 52 
unique 62 

IDs of elements 71 

if/else statements 150 

choosing between two things 141 
false condition 143 
formatting 143 
limitations 147 
mulitple decisions 142 
multiple 154 
multiple else 143 
nested 175 

if statements 138, 150 
nested 155, 158 
semicolon 143 

<img> tag 204 

importing external scripts 119 

indexed arrays 199, 201， 202 

infinite loops 201,223 
Mandango project 210 


initializing data 69 
constants 60—61 
variables 45 

initializing loops 191 
initSeats() function 205, 248 

innerHTML property 348, 350, 352, 364, 408 
setting content 349 
<input> tag, disabled attribute 574 
instances 

class properties versus instance properties 464, 466 
properties and methods 454-455, 463 
this keyword 454 
versus classes 452-453, 459 

interactivity 

HTML and CSS 8 
without JavaScript 13 

Internet Explorer, debugging 488, 491 

interpreter 86, 89, 493—494 

interval timers 93, 95, 97 
stopping 97 

IQ calculator script 487-497 
missing curly braces 493—494 
typos, debugging 496 
undefined variable error 495—496 

iRock project 

100 in the iRock image size calculation 105 

alert() function 19 

cookie messages 129 

cookies not available 126 

cookie writing 122—123 

dynamically resizing iRock 108—109 

emotional behavior 90—91 

events 18 

greeting, specifying text for 23 
greeting users with cookies 120-121 
instant replay 27 
resizing 101—103 

resizing browser windows 106—107 
storing data 34 
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JavaScript 

classes versus CSS style classes 372 
interpreter (see interpreter) 
separating HTML, JavaScript, and CSS code 
270-271 

writing files to server 578 
JavaScript code 
browsers 13 
comments inside 173 
constants (see constants) 
data types 35 

downside to storing JavaScript code in external 
file 125 

duplicate, eliminating 254-256 
events 18 
identifiers 50 

importing from external files 592—593 
missing curly braces 493-494 
running 88 
servers 89 

single-line comment at end 173 
starting 13 

trying to references undefined variable or 
function 511 
variables (see variables) 

K 

keywords 44 

capitalization 46 



length property of a string 306—307 
local variables 169 — 173 

logic errors 510—5 11， 525 
poor scripting 512-513 


condition testing false 201 
continue statements 212 
for (see for loops) 
infinite loops 201， 223 
initializing 191 
loop counter 213 
nested loops 227 
testing conditions 191 
updates 191 
while (see while loop) 

lowerGamelGase 52, 62, 249 

M 

Mandango project 194—220 

2-D Mandango Up Close 236—237 
better way to handle the three-seat check 217 
break statements 212 
Code Up Close 215 
continue statements 212 
findSeat() function 206, 211 
findSeats() function 258 
from JavaScript to HTML 203—206 
getSeatStatus() function 267—268 
infinite loops 210 
initSeats() function 205, 248 
mapping array to seat images 204 
onload event handler 283 
seat images 204 
seat initialization 205 
selSeat variable 206, 211 
setSeat() function 257-258 
showSeatStatus() function 268—269, 272—273, 279 
solo seat searching version 209 
two-dimensional arrays 231-234 
accessing data 233 
markup language 542 

Master of Patterns 325 
Math object 434, 437 
Math Object Exposed 435 


loops 189-242 
action 191 

break statements 212, 213, 224 


metacharacters 320—321，324 
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methods 

getElementById() 71 ， 76 ， 101， 102 

knowing what script code can be put into 441 

reload() 97 

storing in classes 455 

turning functions into 441—442 

milliseconds 95， 104 

mobile devices, wrong-sized graphics 99—101 

N 

NaN (Not a Number) 62, 69 
navigator object 126 
nested if/else statements 175 
nested if statements 155, 158 
nested loops 227 
new operator 405, 413 
nodes 353 

changing node text 360—361 
multiple children 360 
properties 

childNodes 357 
firstChild 357 
lastChild 357 
nodeType 357 
node Value 357 

replacing node text with a function 368—369 

style property 377 

types 354, 362 

visibility style property 377 

No Dumb Questions 

! (negation operator) 165 

100 in the iRock image size calculation 105 

addition versus concatenation 76 

Ajax 580 

request/response 561 
AjaxRequest object 561 
alert boxes 314 
validation 309 
arguments 

altering 260 

limit on number of 260 


Array. sort() method 423 
arrays 234 

additional data in 234 
data stored in 201 
indexed 201 
two-dimensional 234 
Blog() constructor’s argument list 478 
blog data 548 
Blog object 441 

boolean operators, parentheses 219 
break statements 213 
browsers 89 
callback functions 281 

onload event handler 283 
callNum variable 511 
camel case and lower camel case 62 
charAt() method versus indexOf() method 432 
child nodes 363 
classes versus instances 459 
class properties 

versus global variables 464 
versus instance properties 464 
clearlnterval() function 97 
clients 89 

controlling 89 
client window 101 

closing browser before timer expires 97 
code separation 274 
comments inside code 173 
compound statements 149 
inside for loops 201 

connection between XML and Ajax 548 
constants, when to use 49 
constructors 459 
cookies 

names 125 

shared across browsers 125 
where stored 125 
createTextNode() function 371 
CSS style classes 375 

versus JavaScript classes 374 
data types 49 
Date object 414 

sort comparison 423 
debuggers 511 
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debugging 
Firefox 491 
IE 491 

difference between a normal boolean operator and a 
boolean logic operator 219 
difference between Web client, browser, client window, 
and browser window 101 
disabling code 531 
div element versus span element 371 
downside to storing JavaScript code in external 
file 125 

element versus its value 76 
error console in browser 491 
escape characters 511 
limitation 511 
events 

where they come from 21 
without connected code 21 
explicitly setting variables and constants 49 
floor() method versus round() method 437 
form object 294 
forms 13 
fields 294 

generating events 296 
onblur event 296 
form field size attribute 309 
function literals 281 
functions 398 
built-in 21 

knowing when to use 249 
location in code 260 
naming conventions 249 
purpose of 249, 260 
referencing 274 

versus compound statements 149 
versus variables 274 
GET and POST requests 561 
getElementById() method 76, 352, 358, 375 
getElementsByTagName() method 358 
global variables 
script level 173 
versus local variables 171 
help message, clearing 309 
help text element 309 
HTML 〈 strong〉tag in XML 572 


HTML size attribute 309 
identifiers, unique 62 
if/else statement 

false condition 143 
multiple else 143 
infinite loops 201 
interactivity without JavaScript 13 
interpreter 89 
interval timers 97 
stopping 97 
JavaScript code 
browsers and 13 
servers 89 

single-line comment at end 173 
starting 13 

knowing what script code can be put into methods 
441 

loop counter 213 
loops 

code not being called 227 
condition testing false 201 
Math object 437 
NaN (Not a Number) 62 
nested if statements 158 
nested loops 227 
NOT operator 219 
null 165 

object-oriented 461 
objects 

constructors 405 
data types 398 
dot operator 398 
new operator 405 
properties and methods 398 
onload event 105 
onload event handler 283 
onmouseout event 375 
onmouseover event 375 
parselnt() function and decimal numbers 76 
permanent cookies 125 
PHP 580 

placeOrder() function 314 
prototype objects 459 
pseudocoding 158 
quotes and apostrophes 21 
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No Dumb Questions (continued) 

ready state and status of an Ajax response 572 
regular expressions 324 
empty data 329 
metacharacters 324 
resizing iRock 101 
<script> tag 13 

searching for more than one substring 432 
security 13 

semicolon in comments 173 

semicolon in if statement 143 

setlnterval() function 97 

shadow variables 531 

Stick Figure Adventure, variables 149 

storing data on server versus cookies 125 

strings as objects 432 

switch/case statement 179 

this keyword 309, 405, 459 

timers 97 

toLowerGase() in searchBlog() function 432 
toString() method 423 
trying to add strings to numbers 76 
trying to references undefined variable or 
function 511 
typos, debugging 497 
undefined versus not defined 497 
undefined versus null 497 
URL encoding 586 
variables 

inside compound statements 173 
uninitialized 49 
when to use 49 
while loops 227 

width and height CSS style properties 105 
YouGube blog addition script 586 
YouGube project 
Add button 586 
adding a new blog entry 586 
Blog object 408 
innerHTML 408 
Show All Blog Entries button 408 
storing signature in property 464 

non-empty validation 300—303 


NOT operator 219 

null 165 

missing function arguments 477 
versus undefined 497 

number data type 35 

numbers 

converting text to number 65 
trying to add strings to 76 

numeric addition 64, 69, 76 

0 

object-oriented 461 

object-oriented design (OOP) 460, 461, 465, 467 
470-475 

object-oriented script 399 

object literals 413 

objects 395 

arrays as 420 

Blog object 404, 406, 408, 412—413 

capitalization 459 

constructors 402—403, 405 

converting to text 415—417 

custom 400—401 

custom (see custom objects) 

data types 398 

Date object (see Date object) 

dot operator 396—397 

extending 467—470 

Math object 434 

new operator 405, 413 

properties and methods 396, 398 

prototype 456-457 

searchable 426—427 

String object (see String object) 

strings as 432 

toString() method 416 

within objects 413 

onblur event 295-297 
bad form data 298-299 
validateNonEmpty() function 301 
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onchange event 295 

bad form data 298-299 
one-shot timers 93 
onfocus event 295 
onload event 20, 105, 278 
onload event handler 280, 283 
onmouseout event 375 
onmouseover event 375 
onresize event 107—109 
Opera, debugging 488 
organizational object 434 

P 

page loading issues 522-523 

parentheses 

boolean operators 219 
debugging 532 

parseDonuts() function 79 
parseFloat() function 65 

parselnt() function 65, 77 
decimal numbers 76 
PDAs, wrong-sized graphics 99—101 

persistence 112-115 

clients versus servers 116 
phone number validation 333 

PHP 579-584 

running scripts 581-582 
placeOrder() function 313-314 
placeOrder() function Up Close 314 
POST request 554-555, 561 

presentation, separating functionality, content, and 
presentation 270—271 

problems, breaking down 244—245 

prototype objects 456-457, 459, 468-469 

pseudocoding 158 


quantifiers 322—323 

quotes 21 

debugging 501-502, 532 
escape characters 503, 511 

R 

radio call-in script 498-499 
alert boxes 507-508 
callNum variable 507-508, 511 
checkWinner() function 504—505 
debugging quotes 501-502 
how the code is supposed to work 499 

random() method 436 

random numbers 434—437 
learning more 437 

Ready Bake JavaScript 

parseDonuts() function 79 
touchRock() function 24 

regular expressions 318-337 

S 320 
() 322 
* 322 
+ 322 
.(dot) 320 
? 322 
\d 320 
\s 320 
\w 320 
A 320 

{min,max} 329 
{n} 322 

character classes 336 

email address validation 334-337 

empty data 329 

escaping special characters 336 

forward slashes (//) 320 

metacharacters 320-321, 324 

phone number validation 333 
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regular expressions (continued) 
quantifiers 322—323 
validating data with 326—327 
ZIP codes 319 

reload() method 97 
reloading pages, clearing variables 111 
repetition (see loops) 
replaceNodeText() function 369 
request methods 554 

resizing images 99—109 
dynamically 108—109 
Return Exposed 264 
return statement 262—264, 269 
reusable tasks 254-256 
round() method 437 
runtime errors 524—525 



Safari, debugging 488 

scope 169, 170 
global 171 
scripting 244 

script level, global variables 173 
scripts, importing external 119 
<script> tag 13, 119, 592 
searchable objects 424-432 
security 13 

semicolon 

comments 173 
if statement 143 

servers 

JavaScript code 89 
persistence 116 

storing data on versus cookies 125 
setlnterval() function 95, 97, 104 
setSeat() function 257-258 


setTimeout() function 94, 104 
shadow variables 530-532 

showSeatStatus() function 268—269, 272—273, 279 
sort() method 420-421 

sorting 418—423 

compare() function 421 
function literals 422 

span element, versus div element 371 
<span〉tag 302, 362 

Stick Figure Adventure Code Up Close 351 

Stick Figure Adventure project 144 — 171 
beginning 151 

changeScene() function 157, 162, 367 
comments 166, 167 
compound statements 148 
createTextNode() function 371 
CSS style classes versus JavaScript classes 374 
curScene variable 146 
decision tree 152-153, 382-383, 387 
path 161 

pseudocoding 158 
decision variable 146 
div element versus span element 371 
DOM (see Document Object Model) 
dynamic text decisions 370 
empty alert box 162 
resolving 163 
empty options 376 
id attribute of <div> tag 346 
if/else statements 154 
if statements 155 
innerHTML property 348—350 
interactive options 371 
manipulating individual styles 379 
manufacturing HTML code 384 
replacing node text with a function 368—369 
tiered decisions 154 
unfolding the story 380—381 
user decisions 146 
variables 149 
revisiting 170 
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storing data 

constants (see constants) 
data types 35 
variables (see variables) 

string boundary 502 

String object 413 

charAt() method 426 

versus indexOf() method 432 
indexOf() method 426—427 
length 426 
searching within 427 
toLowerGase() method 426 
toUpperGase() method 426 

strings 

as objects 432 
concatenating 64, 69, 76 
debugging quotes 501-502 
empty 72 

escape characters 503 

length property 306—307 

searching for more than one substring 432 

trying to add to numbers 76 

within strings 426 

structure 6—7 
style 6—7 
style class 302 
style object 102—104 
substrings 426 

switch/case statements 143, 177-180 
break statements 178, 179 
curly braces 178 
default branch 178 
Switch Exposed 180 

Switch Exposed 180 
syntax 51 

syntax errors 500, 525 
poor scripting 512-513 


T 

tabular data 233 
tasks, reusable 254-256 
text, converting to number 65 
text data type 35 
TEXT node 354, 362 

this keyword 300, 309, 375, 403, 405, 459 
Blog object 451 
instances 454 

tiered decisions 154 
timers 88 

closing browser before timer expires 97 
delay 94—96 

milliseconds 95 
interval 93, 95, 97 
one-shot 93 
setting 94 
time of day 97 
understanding 92 

toString() method 416, 423 

touchRock() function 24 
cookie writing 122—123 
2-D Mandango Up Close 236—237 

two-dimensional arrays 231—234 

2-D Mandango Up Close 236—237 
accessing data 233 

typos, debugging 496, 497, 532 

u 

unary operator 219 
undefined 

versus not defined 497 
versus null 497 

undefined variable error 495—496 
unique identifiers 62 
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URL encoding 585 
spaces 586 
user decisions 146 

decision tree 152-153 
path 161 

pseudocoding 158 
tiered decisions 154 

user input 4—5 
intuitive 77 
searching 78 
trusting 83 

V 

validateDate() function 329 

validateLength() function 306 

validateNonEmpty() function 300—303, 329 

validateRegEx() function 326—327 

validation, data (see data, validation) 

variables 40 
clearing 111 
creating blank 44 
data types 45 
explicitly setting 49 
global 169—173 

inside compound statements 173 
local 169—173 

local and global variables with same name 530-531 

location in code 168 

NaN (Not a Number) 62 

scope (see scope) 

shadow 530-532 

Stick Figure Adventure, revisiting 170 
trying to references undefined variable or 
function 511 

undefined variable error 495—496 
uninitialized 49 
versus constants 43 
versus fucntions 274 
when to use 49 

var keyword 44 

viruses 124 
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watching variables 508, 515 
error consoles 516 
when it’s not enough 526—527 

Watch it! 

=versus == 164 
break statements 179 
concatenating strings 64 
const keyword 46 
cookies 124 

CSS style classes versus JavaScript classes 372 
Date methods 417 
id attribute 346 

regular expressions, escaping special characters 336 

resizing images 109 

timer delay 95 

validating dates 329 

while loops 223 

ZIP codes 312 

Web client (see clients) 

Web pages 

element versus its value 76 
fetching data from 71 
interactions 86-87 
reloading 111 

Web scripting 244 

Web standards 365 

while loops 222—229 

code not being called 227 
width and height CSS style properties 105 
worms 124 

X 

XHTML 545-546 

XML 

Ajax 549 
blog data 547 

connection between XML and Ajax 548 
DOM 549 
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extracting content from nodes of XML data 566 

HTML 〈 strong〉tag 572 

tagging custom data 543 

versus HTML 542 

XHTML 545 

•xml file extension 544 

XMLHttpRequest object 552-556, 560 
abort() 552 
complexity 553 
GET or POST request 555 
making less painful 556 
onr e ady state change 552 
open() 552 
re ady State 552 
responseText 552 
responseXML 552 
send() 552 
status 552 

Y 

YouGube project 399—448 
Add button 586 
adding images 476-479 
adding new blog entry 585 
images 586 

adding signature property to Blog class 460-465 
Ajax 541-571 
Ajax request 563-564 
auto-filling blog data 590-591 
blog addition script 586 
blog data 547-548 
XML 547 

Blog object (see Blog object) 
blog sorting 418-423 
buttons 573—576 
disabling 574-576 


calling class methods 474 
class-owned methods 455-458 
converting objects to text 415—417 
Data object, shortFormat() method 592 
Date object 410-411 

accessing parts of a date 417 
dynamic data 538-539 
extending objects 467-470 
extracting content from nodes of XML data 566 
handleRequest() function 569-570 
HTML 〈 strong〉tag in XML 572 
importing JavaScript code from external files 592—593 
injecting with Ajax 550—551 
innerHTML 408 
modular date formatter 592 
objects 

constructors 402—403 
custom 400—401 
within obj ects 413 
order of blog entries 408—410 
PHP 579-584 

running scripts 581-582 
random blogs 433-438 
search feature 424-432 
Show All Blog Entries button 408 
sorting 472-473 

turning functions into methods 441—442 
updating blog from browser 577-584 
URL encoding 585 
spaces 586 

YouGube Up Close 407 

z 

ZIP code validation 310—311 
regular expressions 319 
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